diff --git a/Layouts/boxes layout/css/main.css b/Layouts/boxes layout/css/main.css
index d5b8015..b007d04 100644
--- a/Layouts/boxes layout/css/main.css	
+++ b/Layouts/boxes layout/css/main.css	
@@ -1,65 +1,88 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'Roboto', sans-serif;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
 }
 
 :root {
+  font-size: clamp(1rem, 1.2vmax, 3rem);
+}
+
+html, body {
+  height: 100%;
   scroll-behavior: smooth;
 }
 
-html {
-  margin-left: calc(100vw - 100%);
-}
-
 body {
-  --accent-color: #303F9F;
-  --text-color: 17, 17, 17;
-  --foreground-color: 255, 255, 255;
-  background: rgba(var(--foreground-color), 1);
   color: rgba(var(--text-color), 1);
-  font-size: 16px;
+  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"] {
-  --accent-color: #4a5cd3;
-  --foreground-color: 20, 20, 20;
-  --text-color: 238, 238, 238;
-}
-
-h1, h2, h3, h4, h5 {
-  font-family: 'Poppins', sans-serif;
-  text-transform: capitalize;
-}
-
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.8rem;
+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 {
-  margin: 1.5rem 0;
+  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 {
+  object-fit: cover;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-button {
+  --border-radius: 0.3rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
 
 .hide {
   opacity: 0;
@@ -70,102 +93,263 @@ p {
   display: none !important;
 }
 
-.icon {
-  height: 1.2rem;
-  width: 1.2rem;
-  fill: none;
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.no-transformations {
+  transform: none !important;
 }
 
-#navbar {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: auto;
-  border-top: solid 1px rgba(var(--text-color), 0.2);
-  border-right: none;
-  z-index: 3;
-  background: rgba(var(--foreground-color), 1);
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-#navbar .navbar-item {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  padding: 0.3em;
-  margin: 0.3em;
-  border-radius: 0.4em;
-  color: rgba(var(--text-color), 0.8);
-  font-size: 0.9em;
+.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;
+}
+
+.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: 0.8rem;
+}
+
+.uppercase {
   text-transform: uppercase;
-  width: 100%;
-  letter-spacing: 0.08em;
-  -webkit-tap-highlight-color: transparent;
 }
 
-#navbar .navbar-item h5 {
-  font-size: 0.6em;
-  margin-top: 0.4em;
-  font-weight: 700;
-}
-
-#navbar .active {
-  color: var(--accent-color);
-}
-
-#navbar .active .icon {
-  stroke: var(--accent-color);
-}
-
-#main_header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 1rem 0;
-}
-
-#logo {
-  display: -ms-grid;
-  display: grid;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 100%;
-  -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
-  gap: 0.6rem 0.6rem;
-  margin-right: 1rem;
-}
-
-#logo h4 {
+.capitalize {
   text-transform: capitalize;
-  font-size: 1.2rem;
-  font-weight: 600;
 }
 
-#logo h5 {
-  font-family: 'Roboto', sans-serif;
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.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: transparent;
+}
+
+.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: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+#confirmation_popup,
+#prompt_popup {
+  flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+  font-weight: 500;
+  margin-bottom: 0.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: 0.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 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;
@@ -173,175 +357,126 @@ p {
   stroke: none;
 }
 
-.toggle {
-  position: relative;
-  cursor: pointer;
-  z-index: 1;
-  padding: 0;
+.right {
+  max-height: 100%;
+  overflow-y: auto;
 }
 
-.toggle input[type='checkbox'] {
-  display: none;
+#side_nav {
+  grid-area: side-nav;
+}
+#side_nav h4 {
+  font-size: 0.9rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 1.5rem;
 }
 
-.toggle .switch {
-  overflow: hidden;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  justify-items: center;
-  padding: 0.2rem;
-  min-height: 1.6rem;
-  max-height: 1.6rem;
-  border-radius: 0.5rem;
-  position: relative;
-  margin: 0;
+.nav-list {
+  list-style: none;
+  display: flex;
+  justify-content: space-evenly;
+}
+.nav-list li {
+  width: 100%;
 }
 
-.toggle .circle {
-  border-radius: 0.5rem;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
-  fill: rgba(var(--text-color), 0.8);
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  height: 1.2rem;
-  width: 1.2rem;
+.nav-list__item {
+  display: flex;
+  padding: 0.8rem 1.5rem;
+  text-transform: capitalize;
+}
+.nav-list__item--active {
+  color: var(--accent-color);
+}
+.nav-list__item--active .icon {
+  fill: var(--accent-color);
 }
 
-.toggle .circle:first-of-type {
-  margin-bottom: 0.4rem;
+.right {
+  padding: 1.5rem;
 }
-
-.toggle .circle line {
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-}
-
-.toggle input:checked ~ .switch .circle {
-  -webkit-transform: translateY(-1.7rem);
-          transform: translateY(-1.7rem);
+.right h1 {
+  margin-bottom: 1.5rem;
 }
 
 .page {
-  padding: 2rem 0;
-  padding-bottom: 4rem;
-}
-
-.options-tab {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-direction: column;
+  padding-bottom: 3rem;
 }
 
-.options-tab .option {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  border-radius: 0.4rem;
-  padding: 1.5rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  width: 9rem;
-  border: solid 1px rgba(var(--text-color), 0.2);
-  text-transform: capitalize;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
+@media screen and (max-width: 640px) {
+  main {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
+  }
 
-.options-tab .option .icon {
-  background: rgba(var(--text-color), 0.1);
-  height: 2.8rem;
-  width: 2.8rem;
-  padding: 0.8rem;
-  border-radius: 2rem;
-  margin-bottom: 1rem;
-  stroke: rgba(var(--text-color), 0.4);
+  .nav-list__item {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0.4rem;
+  }
+  .nav-list__item span {
+    font-size: 0.8rem;
+    margin-top: 0.3rem;
+  }
 }
+@media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 32rem;
+  }
 
-.options-tab .option h4 {
-  font-weight: 400;
-  font-size: 0.9rem;
-}
+  main {
+    grid-template-columns: 14rem minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "main-header main-header" "side-nav .";
+  }
 
-#home_page h1 {
-  margin-top: 3vw;
-  font-weight: 600;
-}
+  .nav-list {
+    flex-direction: column;
+  }
 
-#home_page p {
-  margin-bottom: 3rem;
-}
+  .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: 0.5rem;
+  }
 
-#home_page h2 {
-  margin-bottom: 1rem;
-}
+  .right {
+    display: grid;
+    grid-template-columns: 1fr 90% 1fr;
+  }
+  .right > * {
+    grid-column: 2/3;
+  }
 
-@media only screen and (min-width: 640px) {
-  body {
-    padding: 1rem 6vw;
-    margin-left: 6rem;
-  }
-  p {
-    max-width: 40rem;
-  }
-  #navbar {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-            align-items: stretch;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    right: auto;
-    width: 6rem;
-    border-top: none;
-    border-right: solid 1px rgba(var(--text-color), 0.2);
-  }
-  #navbar .navbar-item {
-    width: auto;
-    padding: 1.4em 0;
-    margin: 0.6em;
-  }
-  #navbar .navbar-item .icon {
-    height: 1.4rem;
-    width: 1.4rem;
-  }
-  #navbar .navbar-item h5 {
-    font-size: 0.8em;
-  }
-  #navbar .navbar-item:hover .icon {
-    stroke: rgba(var(--text-color), 1);
-  }
-  #navbar .navbar-item:hover h5 {
-    color: rgba(var(--text-color), 1);
-  }
-  #navbar .navbar-item.active:hover .icon {
-    stroke: var(--accent-color);
-  }
-  #navbar .navbar-item.active:hover h5 {
-    color: var(--accent-color);
+  .page__title {
+    font-size: 2.5rem;
   }
 }
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+@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;
+  }
+  ::-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/Layouts/boxes layout/css/main.min.css b/Layouts/boxes layout/css/main.min.css
new file mode 100644
index 0000000..5982293
--- /dev/null
+++ b/Layouts/boxes layout/css/main.min.css	
@@ -0,0 +1 @@
+.hide,.ripple{pointer-events:none}.nav-list,ul{list-style:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{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),.8)}p:not(:last-of-type){margin-bottom:1rem}img{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:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{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;-ms-hyphens:auto;-moz-hyphens:auto;-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}#logo h4,.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#logo h4,.capitalize,h2{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),.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),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#logo,main{display:grid}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.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}main{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)}#logo{align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}#side_nav{grid-area:side-nav}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.nav-list{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{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.page{display:flex;flex-direction:column;padding-bottom:3rem}@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),.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),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.nav-list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
diff --git a/Layouts/boxes layout/css/main.scss b/Layouts/boxes layout/css/main.scss
index cd9d2cd..dacfd5b 100644
--- a/Layouts/boxes layout/css/main.scss	
+++ b/Layouts/boxes layout/css/main.scss	
@@ -1,52 +1,79 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
 *{
-    box-sizing: border-box;
     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;
 }
-html{
-    margin-left: calc(100vw - 100%);
-}
-body{
-    --accent-color: #303F9F;
-    --text-color: 17, 17, 17;
-    --foreground-color: 255, 255, 255;
-    background: rgba(var(--foreground-color), 1);
+body {
+    &,
+    *{
+        --accent-color: #0D7377;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+        --danger-color: red;
+    }
     color: rgba(var(--text-color), 1);
-    font-size: 16px;
+    background: rgba(var(--background-color), 1);
 }
-body[data-theme="dark"]{
-    --accent-color: #4a5cd3;
-    --foreground-color: 20, 20, 20;
-    --text-color: 238, 238, 238;
+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);
+    }
 }
-h1, h2, h3, h4, h5{
-    font-family: 'Poppins', sans-serif;
-    text-transform: capitalize;
-}
-h1{
-    font-size: 3rem;
-}
-h2{
-    font-size: 2rem;
-}
-h3{
-    font-size: 1.5rem;
-}
-h4{
-    font-size: 1rem;
-}
-h5{
-    font-size: 0.8rem;
-}
-p{
-    margin: 1.5rem 0;
+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;
+    }
+}
+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;
+    }
+}
+
+button{
+    display: inline-flex;
+    border: none;
+    background-color: inherit;
+}
+
+a:any-link:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-button{
+    --border-radius: 0.3rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
 }
 .hide{
     opacity: 0;
@@ -55,76 +82,212 @@ p{
 .hide-completely{
     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;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -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: 0.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: 0.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: transparent;
+}
+.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;
-    fill: none;
-    stroke: rgba(var(--text-color), 0.8);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+    &--left{
+        margin-right: 0.5rem;
+    }
+    &--right{
+        margin-left: 0.5rem;
+    }
 }
-#navbar{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: auto;
-    border-top: solid 1px rgba(var(--text-color), 0.2);
-    border-right: none;
-    z-index: 3;
-    background: rgba(var(--foreground-color), 1);
-    .navbar-item{
-        position: relative;
-        text-align: center;
-        cursor: pointer;
-        padding: 0.3em;
-        margin: 0.3em;
-        border-radius: 0.4em;
-        color: rgba(var(--text-color), 0.8);
-        font-size: 0.9em;
-        text-transform: uppercase;
-        width: 100%;
-        letter-spacing: 0.08em;
-        -webkit-tap-highlight-color: transparent;
-        h5{
-            font-size: 0.6em;
-            margin-top: 0.4em;
-            font-weight: 700;
-        }
-    }
-    .active{
-        color: var(--accent-color);
-        .icon{
-            stroke: var(--accent-color);
+#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;
         }
     }
 }
+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{
-    display: flex;
-    padding: 1rem 0;
+    grid-area: main-header;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid rgba(var(--text-color), .1);
 }
 #logo{
     display: grid;
     align-items: center;
     width: 100%;
     grid-template-columns: auto 1fr;
-    gap: 0.6rem 0.6rem;
+    gap: 0 0.5rem;
     margin-right: 1rem;
     h4{
         text-transform: capitalize;
-        font-size: 1.2rem;
+        font-size: 1rem;
         font-weight: 600;
     }
-    h5{
-        font-family: 'Roboto', sans-serif;
-        font-weight: 400;
-    }
     #main_logo{
         height: 1.4rem;
         width: 1.4rem;
@@ -132,141 +295,113 @@ p{
         stroke: none;
     }
 }
-.toggle{
-    position: relative;
-    cursor: pointer;
-    z-index: 1;
-    padding: 0;
-    input[type='checkbox']{
-        display: 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;
     }
-    .switch{
-        overflow: hidden;
-        display: inline-flex;
-        flex-direction: column;
-        justify-items: center;
-        padding: 0.2rem;
-        min-height: 1.6rem;
-        max-height: 1.6rem;
-        border-radius: 0.5rem;
-        position: relative;
-        margin: 0;
+}
+.nav-list{
+    list-style: none;
+    display: flex;
+    justify-content: space-evenly;
+    li{
+        width: 100%;
     }
-    .circle{
-        border-radius: 0.5rem;
-        transition: transform 0.3s;
-        &:first-of-type{
-            margin-bottom: 0.4rem;
-        }
-        fill: rgba(var(--text-color), 0.8);
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        height: 1.2rem;
-        width: 1.2rem;
-        line{
-            stroke: rgba(var(--text-color), 0.8);
-            stroke-width: 6;
+}
+.nav-list__item{
+    display: flex;
+    padding: 0.8rem 1.5rem;
+    text-transform: capitalize;
+    &--active{
+        color: var(--accent-color);
+        .icon{
+            fill: var(--accent-color);
         }
     }
-    input:checked ~ .switch .circle{
-        transform: translateY(-1.7rem);
+}
+.right{
+    padding: 1.5rem;
+    h1{
+        margin-bottom: 1.5rem;
     }
 }
 .page{
-    padding: 2rem 0;
-    padding-bottom: 4rem;
-}
-.options-tab{
     display: flex;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-    .option{
-        display: inline-flex;
+    flex-direction: column;
+    padding-bottom: 3rem;
+}    
+@media screen and (max-width: 640px){
+    main{
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr;
+    }
+    .nav-list__item{
         flex-direction: column;
-        border-radius: 0.4rem;
-        padding: 1.5rem;
-        margin-right: 1rem;
-        margin-bottom: 1rem;
-        width: 9rem;
-        border: solid 1px rgba(var(--text-color), 0.2);
-        text-transform: capitalize;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        .icon{
-            background: rgba(var(--text-color), 0.1);
-            height: 2.8rem;
-            width: 2.8rem;
-            padding: 0.8rem;
-            border-radius: 2rem;
-            margin-bottom: 1rem;
-            stroke: rgba(var(--text-color), 0.4);
-        }
-        h4{
-            font-weight: 400;
-            font-size: 0.9rem;
-        }
-    }
-}
-#home_page{
-    h1{
-        margin-top: 3vw;
-        font-weight: 600;
-    }
-    p{
-        margin-bottom: 3rem;
-    }
-    h2{
-        margin-bottom: 1rem;
-    }
-}
-@media only screen and (min-width: 640px){
-    body{
-        padding: 1rem 6vw;
-        margin-left: 6rem;
-    }
-    p{
-        max-width: 40rem;
-    }
-    #navbar{
         justify-content: center;
-        flex-direction: column;
-        align-items: stretch;
-        left: 0;
-        bottom: 0;
-        top: 0;
-        right: auto;
-        width: 6rem;
-        border-top: none;
-        border-right: solid 1px rgba(var(--text-color), 0.2);
-        .navbar-item{
-            width: auto;
-            padding: 1.4em 0;
-            margin: 0.6em;
-            .icon{
-                height: 1.4rem;
-                width: 1.4rem;
-            }
-            h5{
-                font-size: 0.8em;
-            }
-            &:hover{
-                .icon{
-                    stroke: rgba(var(--text-color), 1);
-                }
-                h5{
-                    color: rgba(var(--text-color), 1);
-                }
-            }
-            &.active:hover{
-                .icon{
-                    stroke: var(--accent-color);
-                }
-                h5{
-                    color: var(--accent-color);
-                }
-            }
+        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/Layouts/boxes layout/index.html b/Layouts/boxes layout/index.html
index 682a063..3042abe 100644
--- a/Layouts/boxes layout/index.html	
+++ b/Layouts/boxes layout/index.html	
@@ -6,131 +6,82 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <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">
 </head>
 
-<body data-theme="light">
-    <header id="main_header" class="flex">
-        <div id="logo">
-            <svg id="main_logo" viewBox="0 0 27.25 32">
-                <title>RanchiMall</title>
-                <path
-                    d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
-            </svg>
-            <span>
-                <h5>RanchiMall</h5>
-                <h4>App Name</h4>
-            </span>
+<body data-theme="light" class="hide-completely">
+    <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>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn">OK</button>
         </div>
-        <label class="toggle" title="Change theme">
-            <input type="checkbox" name="theme toggle" id="theme_toggle">
-            <div class="switch">
-                <svg class="circle" viewBox="0 0 64 64">
-                    <title>dark theme</title>
-                    <path
-                        d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
-                        transform="translate(0 0)" />
-                </svg>
-                <svg class="circle" viewBox="0 0 64 64">
-                    <title>light theme</title>
-                    <circle cx="32" cy="32" r="13.9" />
-                    <line x1="32" y1="6.86" x2="32" />
-                    <line x1="32" y1="64" x2="32" y2="57.14" />
-                    <line x1="57.14" y1="32" x2="64" y2="32" />
-                    <line y1="32" x2="6.86" y2="32" />
-                    <line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
-                    <line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
-                    <line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
-                    <line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
-                </svg>
-            </div>
-        </label>
-    </header>
-    <nav id="navbar">
-        <div class="navbar-item active" onclick="showPage(this, 'home_page')">
-            <svg class="icon" viewBox="0 0 64 64">
-                <path
-                    d="M24.77,44.15H40.06V63.5H53.4V36h5.66a3.38,3.38,0,0,0,2.53-5.68l-6.73-7.16V11.26H46.48v3L34.53,1.59a3.49,3.49,0,0,0-5.06,0L2.41,30.35A3.38,3.38,0,0,0,4.94,36H10.6V63.5H24.77" />
-            </svg>
-            <h5>Home</h5>
+    </sm-popup>
+    <sm-popup id="prompt_popup">
+        <h4 id="prompt_title"></h4>
+        <p id="prompt_message"></p>
+        <sm-input id="prompt_input"></sm-input>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
         </div>
-        <div class="navbar-item" onclick="showPage(this, 'profile_page')">
-            <svg class="icon" viewBox="0 0 49.54 61.12">
-                <path
-                    d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14"
-                    transform="translate(-25.23 -20)" />
-                <path
-                    d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06"
-                    transform="translate(-25.23 -19.44)" />
-            </svg>
-            <h5>User</h5>
-        </div>
-    </nav>
+    </sm-popup>
     <main>
-        <section class="page" id="home_page">
-            <h1>Heading</h1>
-            <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi excepturi eius voluptate quod quasi
-                dolore, quisquam, voluptatem repellendus sapiente consectetur similique ducimus dicta magni harum,
-                perspiciatis unde debitis? Eveniet, temporibus!
-            </p>
-
-            <h3>Options</h3>
-
-            <div class="options-tab">
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
+        <header id="main_header" class="flex align-center space-between">
+            <div id="logo">
+                <svg id="main_logo" viewBox="0 0 27.25 32">
+                    <title>RanchiMall</title>
+                    <path
+                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
+                </svg>
+                <h4>App name</h4>
             </div>
-        </section>
-        <section id="profile_page" class="page hide-completely">
-            <h2>User Settings</h2>
-        </section>
+            <theme-toggle></theme-toggle>
+        </header>
+        <nav id="side_nav">
+            <ul class="nav-list">
+                <li>
+                    <a href="#dashboard" class="nav-list__item nav-list__item--active interact">
+                        <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 21V11h8v10h-8zM3 13V3h8v10H3zm6-2V5H5v6h4zM3 21v-6h8v6H3zm2-2h4v-2H5v2zm10 0h4v-6h-4v6zM13 3h8v6h-8V3zm2 2v2h4V5h-4z"/></svg>
+                        <span>
+                            dashboard
+                        </span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#settings" class="nav-list__item interact">
+                        <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="M2 12c0-.865.11-1.703.316-2.504A3 3 0 0 0 4.99 4.867a9.99 9.99 0 0 1 4.335-2.505 3 3 0 0 0 5.348 0 9.99 9.99 0 0 1 4.335 2.505 3 3 0 0 0 2.675 4.63c.206.8.316 1.638.316 2.503 0 .865-.11 1.703-.316 2.504a3 3 0 0 0-2.675 4.629 9.99 9.99 0 0 1-4.335 2.505 3 3 0 0 0-5.348 0 9.99 9.99 0 0 1-4.335-2.505 3 3 0 0 0-2.675-4.63C2.11 13.704 2 12.866 2 12zm4.804 3c.63 1.091.81 2.346.564 3.524.408.29.842.541 1.297.75A4.993 4.993 0 0 1 12 18c1.26 0 2.438.471 3.335 1.274.455-.209.889-.46 1.297-.75A4.993 4.993 0 0 1 17.196 15a4.993 4.993 0 0 1 2.77-2.25 8.126 8.126 0 0 0 0-1.5A4.993 4.993 0 0 1 17.195 9a4.993 4.993 0 0 1-.564-3.524 7.989 7.989 0 0 0-1.297-.75A4.993 4.993 0 0 1 12 6a4.993 4.993 0 0 1-3.335-1.274 7.99 7.99 0 0 0-1.297.75A4.993 4.993 0 0 1 6.804 9a4.993 4.993 0 0 1-2.77 2.25 8.126 8.126 0 0 0 0 1.5A4.993 4.993 0 0 1 6.805 15zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
+                        <span>
+                            Settings
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        <article class="right language-html">
+            <section id="dashboard" class="page">
+                <h1 class="page__title">Dashboard</h1>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, sint. Aperiam ipsum expedita tenetur quasi, repellat ea. Laboriosam, earum ratione!</p>
+            </section>
+
+            <section id="settings" class="page hide-completely">
+                <h1 class="page__title">Settings</h1>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nihil distinctio dolore molestias ullam architecto ipsam qui possimus aliquam. Odio.</p>
+            </section>
+        </article>
     </main>
-    <script id="helper_functions" src="js/helper.js"></script>
-    <script src="js/components.js"></script>
-    <script id="UI_functions">
-        let allPages = document.querySelectorAll('.page'),
-            allTabs = document.querySelectorAll('.navbar-item');
-        function showPage(btn, page) {
-            allPages.forEach((page) => {
-                page.classList.add('hide-completely')
-            })
-            allTabs.forEach((tab) => {
-                tab.classList.remove('active')
-            })
-            document.getElementById(page).classList.remove('hide-completely')
-            btn.classList.add('active')
-        }
-    </script>
+    <script src="js/main_UI.js"></script>
+    <script src="js/components.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Layouts/boxes layout/js/components.js b/Layouts/boxes layout/js/components.js
deleted file mode 100644
index 30d8c2f..0000000
--- a/Layouts/boxes layout/js/components.js	
+++ /dev/null
@@ -1,2918 +0,0 @@
-//Button
-
-const smButton = document.createElement('template')
-smButton.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }       
-            :host{
-                display: inline-flex;
-            }
-            :host([disabled='true']) .button{
-                cursor: default;
-                opacity: 1;
-                background: rgba(var(--text-color), 0.4) !important;
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='primary']) .button{
-                background: var(--accent-color);
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='outlined']) .button{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            :host([variant='no-outline']) .button{
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            .button {
-                display: flex;
-                padding: 0.6rem 0.9rem;
-                cursor: pointer;
-                user-select: none;
-                border-radius: 0.2rem; 
-                justify-content: center;
-                transition: box-shadow 0.3s;
-                text-transform: uppercase;
-                font-weight: 500;
-                color: rgba(var(--text-color), 0.9);
-                letter-spacing: 0.1rem;
-                font-family: var(--font-family);
-                font-size: 0.9rem;
-                background: rgba(var(--text-color), 0.1); 
-                -webkit-tap-highlight-color: transparent;
-                outline: none;
-            }
-            :host(:not([disabled="true"])) .button:focus{
-                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:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-            }
-            @media (hover: hover){
-                :host(:not([disabled="true"])) .button:active{
-                    box-shadow: none !important;
-                }
-                :host([variant='outlined']) .button:active{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset !important;
-                }
-                :host(:not([disabled="true"])) .button:hover{
-                    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:hover{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                }
-            }
-            @media (hover: none){
-                :host(:not([disabled="true"])) .button:active{
-                    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{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)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 class="button" tabindex="0" role="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.getAttribute('disabled')
-        }
-
-        set disabled(val) {
-            this.setAttribute('disabled', val)
-        }
-
-        dispatch = () => {
-            if (this.getAttribute('disabled') === 'true') {
-                this.dispatchEvent(new CustomEvent('disabled', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-            else {
-                this.dispatchEvent(new CustomEvent('clicked', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-        }
-
-        connectedCallback() {
-            this.addEventListener('click', (e) => {
-                this.dispatch()
-            })
-            this.addEventListener('keyup', (e) => {
-                if (e.code === "Enter" || e.code === "Space")
-                    this.dispatch()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-        }
-    })
-
-//Input
-const smInput = document.createElement('template')
-smInput.innerHTML = `
-        <style>
-        *{
-            padding: 0;
-            margin: 0;
-            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:invalid{
-            outline: none;
-            box-shadow: none;
-        }
-        ::-moz-focus-inner{
-        border: none;
-        }
-        :host{
-            display: inline-flex;
-        }
-        .hide{
-           opacity: 0 !important;
-           pointer-events: none !important;
-        }
-        .icon {
-            fill: none;
-            height: 1.6rem;
-            width: 1.6rem;
-            padding: 0.5rem;
-            stroke: rgba(var(--text-color), 0.7);
-            stroke-width: 10;
-            overflow: visible;
-            stroke-linecap: round;
-            border-radius: 1rem;
-            stroke-linejoin: round;
-            cursor: pointer;
-            min-width: 0;
-        }
-        .input {
-            display: flex;
-            align-items: center;
-            position: relative;
-            gap: 1rem;
-            padding: 0.6rem 1rem;
-            border-radius: 0.2em;
-            transition: opacity 0.3s;
-            background: rgba(var(--text-color), 0.1);
-            font-family: var(--font-family);
-            width: 100%
-            outline: none;
-        }
-
-        input:focus{
-            caret-color: var(--accent-color);
-        }
-        .input:focus-within{
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-        }
-    
-        .label {
-            user-select: none;
-            opacity: .7;
-            font-weight: 400;
-            font-size: 1rem;
-            position: absolute;
-            top: 0;
-            transition: transform 0.3s;
-            -webkit-transform-origin: left;
-            transform-origin: left;
-            pointer-events: none;
-            will-change: transform;
-            text-transform: capitalize;
-        }
-        .container{
-            display: flex;
-            position: relative;
-            align-items: center;
-            flex: 1;
-        }    
-        input{
-            font-size: 1rem;
-            border: none;
-            background: transparent;
-            outline: none;
-            color: rgba(var(--text-color), 1);
-            width: 100%;
-        }
-        .animate-label .container input {
-            -webkit-transform: translateY(0.5rem);
-                    transform: translateY(0.5rem);
-            }
-          
-        .animate-label .container .label {
-            -webkit-transform: translateY(-60%) scale(0.7);
-                    transform: translateY(-60%) scale(0.7);
-            opacity: 1;
-            color: var(--accent-color)
-        }
-        .helper-text{
-            color: var(--error-color);
-            padding: 0.4rem 1rem;
-        }
-        @media (any-hover: hover){
-            .icon:hover{
-                background: rgba(var(--text-color), 0.1);
-            }
-        }
-    </style>
-    <label class="input">
-        <slot name = "icon"></slot>
-        <div class="container">
-            <input/>
-            <div class="label"></div>
-        </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
-    </label>
-    <div class="helper-text hide"></div>
-`;
-customElements.define('sm-input',
-    class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true))
-        }
-        static get observedAttributes() {
-            return ['placeholder']
-        }
-
-        get value() {
-            return this.shadowRoot.querySelector('input').value
-        }
-
-        set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
-        }
-
-        get placeholder() {
-            return this.getAttribute('placeholder')
-        }
-
-        set placeholder(val) {
-            this.setAttribute('placeholder', val)
-        }
-
-        get type() {
-            return this.getAttribute('type')
-        }
-
-        get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
-        }
-
-        preventNonNumericalInput = (e) => {
-            let keyCode = e.keyCode;
-            if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) {
-                e.preventDefault();
-            }
-        }
-
-        checkInput = () => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
-                return;
-            if (this.input.value !== '') {
-                if (this.animate)
-                    this.inputParent.classList.add('animate-label')
-                else
-                    this.label.classList.add('hide')
-                this.clearBtn.classList.remove('hide')
-            }
-            else {
-                if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
-                else
-                    this.label.classList.remove('hide')
-                this.clearBtn.classList.add('hide')
-            }
-            if (this.valueChanged) {
-                if (this.input.checkValidity()) {
-                    this.helperText.classList.add('hide')
-                    this.inputParent.style.boxShadow = ``
-                }
-                else {
-                    this.helperText.classList.remove('hide')
-                    this.inputParent.style.boxShadow = `0 0 0 0.1rem ${this.computedStyle.getPropertyValue('--error-color')}`
-                }
-            }
-        }
-
-        connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.computedStyle = window.getComputedStyle(this.inputParent)
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.helperText = this.shadowRoot.querySelector('.helper-text')
-            this.valueChanged = false;
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
-            if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('helper-text')) {
-                this.helperText.textContent = this.getAttribute('helper-text')
-            }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                }
-                else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            }
-            else
-                this.input.setAttribute('type', 'text')
-            this.input.addEventListener('keydown', e => {
-                if (this.getAttribute('type') === 'number')
-                    this.preventNonNumericalInput(e);
-            })
-            this.input.addEventListener('input', e => {
-                this.checkInput()
-            })
-            this.input.addEventListener('change', e => {
-                this.valueChanged = true;
-                if (this.input.checkValidity())
-                    this.helperText.classList.add('hide')
-                else
-                    this.helperText.classList.remove('hide')
-            })
-            this.clearBtn.addEventListener('click', e => {
-                this.input.value = ''
-                this.checkInput()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'placeholder')
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
-            }
-        }
-    })
-
-// tab-header
-
-const smTabs = document.createElement('template')
-smTabs.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: flex;
-}
-.tabs{
-    position: relative;
-    display: grid;
-    grid-template-rows: auto 1fr;
-}
-.panel-container{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    overflow: hidden auto;
-}
-.tab-header{
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: flex-start;
-    gap: 1rem;
-    position: relative;
-    overflow: auto hidden;
-    max-width: 100%;
-    scrollbar-width: 0;
-    margin-bottom: 1rem;
-}
-.indicator{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 0.15rem;
-    border-radius: 1rem 1rem 0 0;  
-    background: var(--accent-color);
-    transition: transform 0.3s, width 0.3s;
-}
-:host([variant="tab"]) .indicator{
-    height: 100%;
-    border-radius: 0.2rem
-}
-:host([variant="tab"]) .tab-header{
-    border-bottom: none; 
-}
-.hide-completely{
-    display: none;
-}
-:host([variant="tab"]) slot[name="tab"]::slotted(.active){
-    color: rgba(var(--foreground-color), 1);
-}
-
-slot[name="tab"]::slotted(.active){
-    color: var(--accent-color);
-    opacity: 1;
-}
-slot[name="panel"]::slotted(.hide-completely){
-    display: none;
-}
-@media (hover: none){
-    .tab-header::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    .tab-header::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-}         
-</style>
-<div class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot name="tab">Nothing to see here</slot>
-        <div class="indicator"></div>
-    </div>
-    <div part="panel-container" class="panel-container">
-        <slot name="panel">Nothing to see here</slot>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tabs', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true))
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
-        this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-    }
-    connectedCallback() {
-
-        //animations
-        let flyInLeft = [
-            {
-                opacity: 0,
-                transform: 'translateX(-1rem)'
-            },
-            {
-                opacity: 1,
-                transform: 'none'
-            }
-        ],
-            flyInRight = [
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyOutLeft = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                }
-            ],
-            flyOutRight = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                }
-            ],
-            animationOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-        this.prevTab
-        this.allTabs
-
-        this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => {
-            this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => {
-                panel.classList.add('hide-completely')
-            })
-        })
-        this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => {
-            this.allTabs = this.shadowRoot.querySelector('slot[name="tab"]').assignedElements();
-            this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => {
-                panel.setAttribute('rank', index + 1)
-            })
-        })
-        this._targetBodyFlyRight = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInRight, animationOptions)
-        }
-        this._targetBodyFlyLeft = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInLeft, animationOptions)
-        }
-        this.tabSlot.addEventListener('click', e => {
-            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
-                return
-            if (this.prevTab)
-                this.prevTab.classList.remove('active')
-            e.target.classList.add('active')
-
-            e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
-            this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-
-            if (this.prevTab) {
-                let targetBody = e.target.nextElementSibling,
-                    currentBody = this.prevTab.nextElementSibling;
-
-                if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyRight(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyRight(targetBody)
-                        }
-                    }
-                } else {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyLeft(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyLeft(targetBody)
-                        }
-                    }
-                }
-            } else {
-                e.target.nextElementSibling.classList.remove('hide-completely')
-            }
-            this.prevTab = e.target;
-        })
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => { 
-                if (this.prevTab) {
-                    let tabDimensions = this.prevTab.getBoundingClientRect();
-                    this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    let activeElement = this.tabSlot.assignedElements().filter(element => {
-                        if (element.classList.contains('active'))
-                            return true
-                    })
-                    if (activeElement.length) {
-                        let tabDimensions = activeElement[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                    }
-                    else {
-                        this.tabSlot.assignedElements()[0].classList.add('active')
-                        this.panelSlot.assignedElements()[0].classList.remove('hide-completely')
-                        let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                    }
-                }
-            })
-        },
-            { threshold: 1.0 })
-        observer.observe(this)
-        if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick') == 'true') {
-            let touchStartTime = 0,
-                touchEndTime = 0,
-                swipeTimeThreshold = 200,
-                swipeDistanceThreshold = 20,
-                startingPointX = 0,
-                endingPointX = 0,
-                currentIndex = 0;
-            this.addEventListener('touchstart', e => {
-                touchStartTime = e.timeStamp
-                startingPointX = e.changedTouches[0].clientX
-            })
-            this.panelSlot.addEventListener('touchend', e => {
-                touchEndTime = e.timeStamp
-                endingPointX = e.changedTouches[0].clientX
-                if (touchEndTime - touchStartTime < swipeTimeThreshold) {
-                    currentIndex = this.allTabs.findIndex(element => element.classList.contains('active'))
-                    if (startingPointX > endingPointX && startingPointX - endingPointX > swipeDistanceThreshold && currentIndex < this.allTabs.length) {
-                        this.allTabs[currentIndex + 1].click()
-                    }
-                    else if (startingPointX < endingPointX && endingPointX - startingPointX > swipeDistanceThreshold && currentIndex > 0) {
-                        this.allTabs[currentIndex - 1].click()
-                    }
-                }
-            })
-        }
-    }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    position: relative;
-    display: inline-flex;
-    z-index: 1;
-}
-.tab{
-    position: relative;
-    user-select: none;
-    justify-content: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    white-space: nowrap;
-    padding: 0.6rem 0.8rem;
-    font-weight: 500;
-    word-spacing: 0.1em;
-    text-align: center;
-    transition: color 0.3s;
-    text-transform: capitalize;
-    font-family: var(--font-family);
-}
-@media (hover: hover){
-    :host(.active) .tab{
-        opacity: 1;
-    }
-    .tab{
-        opacity: 0.7
-    }
-    .tab:hover{
-        opacity: 1
-    }
-}
-</style>
-<div class="tab">
-    <slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true))
-    }
-})
-
-//chcekbox
-
-const smCheckbox = document.createElement('template')
-smCheckbox.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: inline-flex;
-}
-.checkbox {
-    position: relative;
-    display:flex;
-    align-items: center;
-    cursor: pointer;
-    height: 1.5rem;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-}
-
-p{
-    margin-left: 2rem;
-}
-
-.checkbox:active .icon,
-.checkbox:focus .icon{
-    background: rgba(var(--text-color), 0.2);
-}
-
-.checkbox input {
-  display: none;
-}
-
-.checkbox .checkmark {
-    stroke-dashoffset: -65;
-    stroke-dasharray: 65;
-    -webkit-transition: stroke-dashoffset 0.3s; 
-    transition: stroke-dashoffset 0.3s;
-}
-
-.checkbox input:checked ~ svg .checkmark {
-    stroke-dashoffset: 0;
-    stroke: rgba(var(--foreground-color), 1);
-}
-.checkbox input:checked ~ svg {
-    stroke: var(--accent-color);
-    fill: var(--accent-color);
-    stroke-width: 8; 
-}
-
-.icon {
-    position: absolute;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.7rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    border-radius: 2rem;
-    transition: background 0.3s;
-    left: -0.5rem;
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-</style>
-<label class="checkbox" tabindex="0">
-    <input type="checkbox">
-    <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
-        <rect class="box" x="0" y="0" width="64" height="64" rx="4" />
-        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
-    </svg>
-    <p><slot></slot></p>
-</label>`
-customElements.define('sm-checkbox', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smCheckbox.content.cloneNode(true))
-        
-        this.checkbox = this.shadowRoot.querySelector('.checkbox');
-        this.input = this.shadowRoot.querySelector('input')
-        
-        this.isChecked = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.getAttribute('checked')
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.checkbox.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.checkbox.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-
-})
-
-//audio
-
-const smAudio = document.createElement('template')
-smAudio.innerHTML = `
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-	display: flex;
-}
-
-.audio{
-  position: relative;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-align: center;
-          align-items: center;
-  -webkit-user-select: none;
-          user-select: none;
-  padding: 0.6rem;
-  border-radius: 0.2rem;
-  background: rgba(var(--text-color), 0.08);
-  overflow: hidden;
-  width: 100%;
-}
-
-.hide {
-  display: none;
-}
-
-.icon{
-  stroke: rgba(var(--text-color), 1);
-  stroke-width: 6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-  overflow: visible;
-  height: 2.1rem;
-  width: 2.1rem;
-  padding: 0.6rem;
-  cursor: pointer;
-  border-radius: 2rem;
-  margin-right: 0.5rem;
-}
-
-.icon:hover{
-  background: rgba(var(--text-color), 0.1);
-}
-
-audio {
-  display: none;
-}
-
-.track {
-  position: absolute;
-  height: 0.2rem;
-  bottom: 0;
-  background: var(--accent-color);
-  left: 0;
-  -webkit-transition: width 0.2s;
-  transition: width 0.2s;
-  pointer-events: none;
-  z-index: 0;
-  border-radius: 0.2rem;
-}
-
-.disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-</style>
-	<div class="audio">
-		<svg class="icon play" viewBox="-6 0 64 64">
-			<title>play</title>
-			<path d="M57.12,26.79,12.88,1.31a6,6,0,0,0-9,5.21v51a6,6,0,0,0,9,5.21L57.12,37.21A6,6,0,0,0,57.12,26.79Z"/>
-		</svg>
-		<svg class="icon pause hide" viewBox="0 0 64 64">
-			<title>pause</title>
-			<line x1="17.5" x2="17.5" y2="64"/>
-			<line x1="46.5" x2="46.5" y2="64"/>
-		</svg>
-		<h5 class="current-time"></h5> / <h5 class="duration"></h5>
-		<audio src=""></audio>
-		<div class="track"></div>
-	</audio>
-`;
-
-customElements.define('sm-audio', class extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' }).append(smAudio.content.cloneNode(true))
-
-        this.playing = false;
-    }
-    static get observedAttributes() {
-        return ['src']
-    }
-    play() {
-        this.audio.play()
-        this.playing = false;
-        this.pauseBtn.classList.remove('hide')
-        this.playBtn.classList.add('hide')
-    }
-    pause() {
-        this.audio.pause()
-        this.playing = true;
-        this.pauseBtn.classList.add('hide')
-        this.playBtn.classList.remove('hide')
-    }
-
-    get isPlaying() {
-        return this.playing;
-    }
-
-    connectedCallback() {
-        this.playBtn = this.shadowRoot.querySelector('.play');
-        this.pauseBtn = this.shadowRoot.querySelector('.pause');
-        this.audio = this.shadowRoot.querySelector('audio')
-        this.playBtn.addEventListener('click', e => {
-            this.play()
-        })
-        this.pauseBtn.addEventListener('click', e => {
-            this.pause()
-        })
-        this.audio.addEventListener('ended', e => {
-            this.pause()
-        })
-        let width;
-        if ('ResizeObserver' in window) {
-            let resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    width = entry.contentRect.width;
-                })
-            })
-            resizeObserver.observe(this)
-        }
-        else {
-            let observer = new IntersectionObserver((entries, observer) => {
-                if (entries[0].isIntersecting)
-                    width = this.shadowRoot.querySelector('.audio').offsetWidth;
-            }, {
-                threshold: 1
-            })
-            observer.observe(this)
-        }
-        this.audio.addEventListener('timeupdate', e => {
-            let time = this.audio.currentTime,
-                minutes = Math.floor(time / 60),
-                seconds = Math.floor(time - minutes * 60),
-                y = seconds < 10 ? "0" + seconds : seconds;
-            this.shadowRoot.querySelector('.current-time').textContent = `${minutes}:${y}`
-            this.shadowRoot.querySelector('.track').style.width = (width / this.audio.duration) * this.audio.currentTime + 'px'
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'src') {
-                if (this.hasAttribute('src') && newValue.trim() !== '') {
-                    this.shadowRoot.querySelector('audio').src = newValue;
-                    this.shadowRoot.querySelector('audio').onloadedmetadata = () => {
-                        let duration = this.audio.duration,
-                            minutes = Math.floor(duration / 60),
-                            seconds = Math.floor(duration - minutes * 60),
-                            y = seconds < 10 ? "0" + seconds : seconds;
-                        this.shadowRoot.querySelector('.duration').textContent = `${minutes}:${y}`;
-                    }
-                }
-                else
-                    this.classList.add('disabled')
-            }
-        }
-    }
-})
-
-//switch
-
-const smSwitch = document.createElement('template')
-smSwitch.innerHTML = `	
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-    display: inline-flex;
-}
-.switch {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 2.4rem;
-    padding: 0.2rem;
-    cursor: pointer;
-    outline: none;
-    border-radius: 2rem;
-    -webkit-tap-highlight-color: transparent;
-}
-
-input {
-    display: none;
-}
-
-.track {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1.4rem;
-    -webkit-transition: background 0.3s;
-    transition: background 0.3s;
-    background: rgba(var(--text-color), 0.4);
-    box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-    border-radius: 1rem;
-}
-
-.switch:active .button::after,
-.switch:focus .button::after{
-    opacity: 1
-}
-.switch:focus:not(:focus-visible){
-    opacity: 0;
-}
-.switch:focus-visible .button::after{
-    opacity: 1
-}
-
-.button::after{
-    content: '';
-    display: flex;
-    position: absolute;
-    height: 2.6rem;
-    width: 2.6rem;
-    background: rgba(var(--text-color), 0.2);
-    border-radius: 2rem;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.button {
-    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;
-    transition: transform 0.3s;
-    border: solid 0.3rem rgba(var(--foreground-color), 1);
-}
-
-input:checked ~ .button {
-    transform: translateX(100%);
-}
-
-input:checked ~ .track {
-    background: var(--accent-color);
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-</style>
-<label class="switch" tabindex="0">
-    <input type="checkbox">
-    <div class="track"></div>
-    <div class="button"></div>
-</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
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.switch.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.switch.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-})
-
-// select
-const smSelect = document.createElement('template')
-smSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .icon {
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .option-text{
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .selection{
-                border-radius: 0.2rem;
-                display: grid;
-                grid-template-columns: 1fr auto;
-                grid-template-areas: 'heading heading' '. .';
-                padding: 0.4rem 1rem;
-                background: rgba(var(--text-color), 0.06);
-                border: solid 1px rgba(var(--text-color), 0.2);
-                align-items: center;
-                outline: none;
-            }
-            .selection:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) 
-            }
-            .icon{
-                margin-left: 1rem;
-            }
-            :host([align-select="left"]) .options{
-                left: 0;
-            }
-            :host([align-select="right"]) .options{
-                right: 0;
-            }
-            .options{
-                top: 100%;
-                margin-top: 0.5rem; 
-                overflow: hidden auto;
-                position: absolute;
-                grid-area: options;
-                display: flex;
-                flex-direction: column;
-                min-width: 100%;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, top 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-            }
-            .rotate{
-                transform: rotate(180deg)
-            }
-        </style>
-        <div class="select" >
-            <div class="selection" tabindex="0">
-                <div class="option-text"></div>
-                <svg class="icon toggle" viewBox="0 0 64 64">
-                    <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-
-    collapse = () => {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
-        this.chevron.classList.remove('rotate')
-        this.open = false
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        this.chevron = this.shadowRoot.querySelector('.toggle')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            selection = this.shadowRoot.querySelector('.selection'),
-            previousOption
-        this.open = false;
-            this.slideDown = [
-                { transform: `translateY(-0.5rem)` },
-                { transform: `translateY(0)` }
-            ],
-            this.slideUp = [
-                { transform: `translateY(0)` },
-                { transform: `translateY(-0.5rem)` }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
-            }
-        selection.addEventListener('click', e => {
-            if (!this.open) {
-                this.optionList.classList.remove('hide')
-                this.optionList.animate(this.slideDown, this.animationOptions)
-                this.chevron.classList.add('rotate')
-                this.open = true
-            } else {
-                this.collapse()
-            }
-        })
-        selection.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space')
-                if (!this.open) {
-                    this.optionList.classList.remove('hide')
-                    this.optionList.animate(this.slideDown, this.animationOptions)
-                    this.chevron.classList.add('rotate')
-                    this.open = true
-                } else {
-                    this.collapse()
-                }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.addEventListener('optionSelected', e => {
-            if (previousOption !== e.target) {
-                this.setAttribute('value', e.detail.value)
-                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true
-                }))
-                if (previousOption) {
-                    previousOption.classList.remove('check-selected')
-                }
-                previousOption = e.target;
-            }
-            if(!e.detail.switching)
-                this.collapse()
-
-            e.target.classList.add('check-selected')
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                this.availableOptions.forEach((element, index) => {
-                    element.setAttribute('data-rank', index + 1);
-                    element.setAttribute('tabindex', "0");
-                })
-            }
-        });
-        document.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && this.open) {
-                this.collapse()
-            }
-        })
-    }
-})
-
-// option
-const smOption = document.createElement('template')
-smOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.2rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                display: flex;
-                align-items: center;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            :host(:focus) .option .icon{
-                opacity: 0.4
-            }
-            :host(.check-selected) .icon{
-                opacity: 1 !important
-            }
-            .icon {
-                margin-right: 0.8rem;
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                border-radius: 1rem;
-                stroke-linejoin: round;
-                opacity: 0;
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-                .option:hover .icon{
-                    opacity: 0.4
-                }
-            }
-        </style>
-        <div class="option">
-            <svg class="icon" viewBox="0 0 64 64">
-                <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-            </svg>
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true))
-    }
-
-    sendDetails = (switching) => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value'),
-                switching: switching
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        let validKey = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ]
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-            if (validKey.includes(e.code)) {
-                e.preventDefault()
-                this.sendDetails(true)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }    
-            :host{
-                display: flex;
-            }
-            .icon {
-                position: absolute;
-                display: flex;
-                fill: none;
-                height: 2.6rem;
-                width: 2.6rem;
-                padding: 0.9rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                cursor: pointer;
-                min-width: 0;
-                z-index: 1;
-                background: rgba(var(--foreground-color), 1);
-                -webkit-tap-highlight-color: transparent;
-                transition: opacity 0.3s; 
-            }
-            .hide{
-                pointer-events: none;
-                opacity: 0;
-            }
-            .select-container{
-                position: relative;
-                display: flex;
-                width: 100%;
-                align-items: center;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                gap: 0.5rem;
-                max-width: 100%;
-                overflow: auto hidden;
-            }
-            .previous-item{
-                left: 0;
-            }
-            .next-item{
-                right: 0;
-            }
-            .left,.right{
-                position: absolute;
-                width: 1rem;
-                height: 100%; 
-                transition: opacity 0.3s;
-                z-index: 1;
-            }
-            .left{
-                background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-            }
-            .right{
-                right: 0;
-                background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-            }
-            slot::slotted(.active){
-                border-radius: 2rem;
-                opacity: 1;
-                background-color: rgba(var(--text-color), .6);  
-                color: rgba(var(--foreground-color), 1);
-            }
-            @media (hover: none){
-                ::-webkit-scrollbar-track {
-                    -webkit-box-shadow: none !important;
-                    background-color: transparent !important;
-                }
-                ::-webkit-scrollbar {
-                    height: 0;
-                    background-color: transparent;
-                }
-                .icon{
-                    display: none;
-                }
-                .left,.right{
-                    display: block;
-                }
-            }
-            @media (hover: hover){
-                .select{
-                    overflow: hidden;
-                }
-                .left,.right{
-                    display: none;
-                }
-            }
-        </style>
-        <div class="select-container">
-            <div class="left hide"></div>
-            <svg class="icon previous-item hide" viewBox="4 0 64 64">
-                <title>Previous</title>
-                <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-            </svg>
-            <div class="select">
-                <slot></slot> 
-            </div>
-            <svg class="icon next-item hide" viewBox="-6 0 64 64">
-                <title>Next</title>
-                <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-            </svg>
-            <div class="right hide"></div>
-        </div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            }
-            else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                padding: 0.4rem 0.8rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                border-radius: 2rem;
-                text-transform: capitalize;
-                border: solid 1px rgba(var(--text-color), .3);
-                opacity: 0.9;
-            }
-            .option:focus{
-                background: rgba(var(--text-color), 0.1);
-            }
-
-            @media (hover: hover){
-                .option{
-                    transition: background 0.3s;
-                }
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option" tabindex="0">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
-    }
-    sendDetails = () => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-//popup
-const smPopup = document.createElement('template')
-smPopup.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: grid;
-    }
-    .popup-container{
-        display: grid;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        place-items: center;
-        background: #00000060;
-        z-index: 10;
-        transition: opacity 0.3s ease;
-    }
-    .popup{
-        flex-direction: column;
-        align-self: flex-end;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        width: 100%;
-        border-radius: 0.5rem 0.5rem 0 0;
-        position: relative;
-        display: flex;
-        transform: translateY(100%);
-        transition: transform 0.3s;
-        background: rgba(var(--foreground-color), 1);
-        box-shadow: 0 -1rem 2rem #00000020;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-    .container-header{
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-    }
-    .popup-top{
-        display: flex;
-        width: 100%;
-    }
-    .popup-body{
-        padding: 1.5rem;
-    }
-    .heading{
-        font-weight: 400;
-    }
-    .heading:first-letter{
-        text-transform: uppercase;
-    }
-    .hide{
-        opacity: 0;
-        pointer-events: none;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        padding: 0.4rem;
-        stroke: rgba(var(--text-color), 0.7);
-        stroke-width: 8;
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        -webkit-tap-highlight-color: transparent;
-    }
-    @media screen and (min-width: 640px){
-        .popup{
-            width: 24rem;
-            align-self: center;
-            border-radius: 0.4rem;
-            height: auto;
-            transform: translateY(0) scale(0.9);
-            box-shadow: 0 2rem 2rem #00000040;
-        }
-        .container-header{
-            padding: 1.2rem 1.5rem;
-        }
-    }
-    @media screen and (max-width: 640px){
-        .popup-top{
-            flex-direction: column;
-            align-items: center;
-        }
-        .handle{
-            height: 0.3rem;
-            width: 2rem;
-            background: rgba(var(--text-color), .2);
-            border-radius: 1rem;
-            margin: 0.5rem 0;
-        }
-        .heading{
-            padding: 1rem 1.5rem
-        }
-        .close{
-            height: 2rem;
-            width: 2rem;
-            padding: 0.55rem;
-            margin-right: 1rem;
-        }
-    }
-</style>
-<div class="popup-container hide" role="dialog">
-    <div class="popup">
-        <div class="popup-top">
-            <div class="handle"></div>
-            <div class="container-header">
-                <h3 class="heading"></h3>
-                <svg class="icon close" viewBox="0 0 64 64">
-                    <title>Close</title>
-                    <line x1="64" y1="0" x2="0" y2="64"/>
-                    <line x1="64" y1="64" x2="0" y2="0"/>
-                </svg>
-            </div>
-        </div>
-        <div 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))
-    }
-
-    resumeScrolling = () => {
-        const scrollY = document.body.style.top;
-        window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.setAttribute('style', `overflow: auto; top: initial`)
-        }, 300);
-    }
-
-    show(pinned, popupStack) {
-        this.pinned = pinned
-        this.popupStack = popupStack
-        this.popupContainer.classList.remove('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(0)';
-        else
-            this.popup.style.transform = 'scale(1)';
-        document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    }
-    hide() {
-        this.popupContainer.classList.add('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(100%)';
-        else
-            this.popup.style.transform = 'scale(0.9)';
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length === 0) {
-                this.resumeScrolling()
-            }
-        }
-        else {
-           this.resumeScrolling()
-        }
-    }
-
-    handleTouchStart = (e) => {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartY < e.changedTouches[0].clientY) {
-            this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(this.movePopup)
-        }
-        /*else {
-        offset = touchStartY - e.changedTouches[0].clientY;
-        this.popup.style.transform = `translateY(-${offset}px)`
-    }*/
-    }
-
-    handleTouchEnd = (e) => {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndY - this.touchStartY > this.threshold) {
-                this.hide()
-            }
-            else {
-                this.show()
-            }
-        }
-        else {
-            if (this.touchEndY > this.touchStartY)
-                this.hide()
-        }
-    }
-
-    movePopup = () => {
-        this.popup.style.transform = `translateY(${this.offset}px)`
-    }
-
-    connectedCallback() {
-        this.pinned = false
-        this.popupStack
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.offset
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-        this.touchEndAnimataion;
-        
-        if (this.hasAttribute('heading'))
-            this.shadowRoot.querySelector('.heading').textContent = this.getAttribute('heading')
-                
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                this.hide()
-            }
-        })
-
-        this.shadowRoot.querySelector('.close').addEventListener('click', e => {
-            this.hide()
-        })
-
-        this.popupHeader.addEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.addEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.addEventListener('touchend', this.handleTouchEnd)
-    }
-    disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
-    }
-})
-
-//carousel
-
-const smCarousel = document.createElement('template')
-smCarousel.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .icon {
-        position: absolute;
-        display: flex;
-        fill: none;
-        height: 2.6rem;
-        width: 2.6rem;
-        border-radius: 3rem;
-        padding: 0.9rem;
-        stroke: rgba(var(--foreground-color), 0.8);
-        stroke-width: 14;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        background: rgba(var(--text-color), 1);
-        box-shadow: 0 0.2rem 0.2rem #00000020, 
-                    0 0.5rem 1rem #00000040; 
-        -webkit-tap-highlight-color: transparent;
-        transform: scale(0)
-    }
-    .hide{
-        pointer-events: none;
-        opacity: 0;
-    }
-    .expand{
-        transform: scale(1)
-    }
-    .previous-item{
-        left: 1rem;
-    }
-    .next-item{
-        right: 1rem;
-    }
-    .left,.right{
-        position: absolute;
-        width: 2rem;
-        height: 100%; 
-        transition: opacity 0.3s;
-    }
-    .left{
-        background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .right{
-        right: 0;
-        background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .carousel-container{
-        position: relative;
-        display: flex;
-        width: 100%;
-        align-items: center;
-    }
-    .carousel{
-        display: flex;
-        max-width: 100%;
-        overflow: auto hidden;
-        scroll-snap-type: x mandatory;
-    }
-    slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="start"]) slot::slotted(*){
-        scroll-snap-align: start;
-    }
-    :host([align-items="center"]) slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="end"]) slot::slotted(*){
-        scroll-snap-align: end;
-    }
-    @media (hover: hover){
-        .carousel{
-            overflow: hidden;
-        }
-        .left,.right{
-            display: none;
-        }
-    }
-    @media (hover: none){
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        ::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-        .carousel{
-            overflow: auto none;
-        }
-        .icon{
-            display: none;
-        }
-        .left,.right{
-            display: block;
-        }
-    }
-</style>
-<div class="carousel-container">
-    <div class="left"></div>
-    <svg class="icon previous-item" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="carousel">
-        <slot></slot>
-    </div>
-    <svg class="icon next-item" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right"></div>
-</div>
-`;
-
-customElements.define('sm-carousel', class extends HTMLElement{
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
-    }
-
-    scrollLeft = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    connectedCallback() {
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.carouselItems
-        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width/3
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.previousArrow.classList.remove('expand')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.add('expand')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })        
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.nextArrow.classList.remove('expand')
-                this.nextGradient.classList.add('hide')
-            }
-            else{
-                this.nextArrow.classList.add('expand')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })     
-        
-        const carouselObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-            }
-        })
-
-        carouselObserver.observe(this.carouselContainer)
-        
-        this.carouselSlot.addEventListener('slotchange', e => {
-            this.carouselItems = this.carouselSlot.assignedElements()
-            firstElementObserver.observe(this.carouselItems[0])
-            lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
-        })
-
-        this.addEventListener('keyup', e => {
-            if (e.code === 'ArrowLeft')
-                this.scrollRight()
-            else
-                this.scrollRight()
-        })
-
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-//notifications
-
-const smNotifications = document.createElement('template')
-smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: grid;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 100;
-        max-height: 100%;
-        overflow: hidden auto;
-        overscroll-behavior: contain;
-    }
-    .inner-body{
-        padding: 1rem 1.5rem;
-    }
-    .no-transformations{
-        transform: none;
-        opacity: 1;
-    }
-    .notification{
-        opacity: 0;
-        transform: translateY(-1rem);
-        position: relative;
-        border-radius: 0.3rem;
-        box-shadow: 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-        background: rgba(var(--foreground-color), 1);
-        transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        overflow: hidden;
-        border-bottom: 1px solid rgba(var(--text-color), 0.2);
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        color: rgba(var(--text-color), 0.8);
-        overflow-wrap: break-word;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    header{
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.4rem;
-        width: 100%;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        stroke: rgba(var(--text-color), 0.7);
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-    }
-    .error-icon{
-        stroke: #E53935;
-    }
-    .success-icon{
-        stroke: #00C853;
-    }
-    .close{
-        margin-left: auto;
-        padding: 0.5rem;
-        stroke-width: 10;
-    }
-    .notification-icon{
-        height: 1.2rem;
-        width: 1.2rem;
-        margin-right: 0.6rem;
-        stroke-width: 6;
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            width: 40vw;
-        }
-        .notification{
-            margin-right: 1.5rem;
-            margin-bottom: 1rem;
-            border-bottom: none;
-            border: solid 1px rgba(var(--text-color), 0.2);
-            transform: translateX(1rem);
-        }
-    }
-    @media screen and (max-width: 640px){
-        .close{
-            display: none
-        }
-    }
-</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(true))
-    }
-
-    handleTouchStart = (e) => {
-        this.notification = e.target.closest('.notification')
-        this.touchStartX = e.changedTouches[0].clientX
-        this.notification.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartX < e.changedTouches[0].clientX) {
-            this.offset = e.changedTouches[0].clientX - this.touchStartX;
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-        else {
-            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-    }
-
-    handleTouchEnd = (e) => {
-        this.notification.style.transition = 'height 0.3s, transform 0.3s, opacity 0.3s'
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndX = e.changedTouches[0].clientX
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndX - this.touchStartX > this.threshold) {
-                this.removeNotification(this.notification)
-            }
-            else if (this.touchStartX - this.touchEndX > this.threshold) {
-                this.removeNotification(this.notification, true)
-            }
-            else {
-                this.resetPosition()
-            }
-        }
-        else {
-            if (this.touchEndX > this.touchStartX) {
-                this.removeNotification(this.notification)
-            }
-            else {
-                this.removeNotification(this.notification, true)
-            }
-        }
-    }
-
-    movePopup = () => {
-        this.notification.style.transform = `translateX(${this.offset}px)`
-    }
-
-    resetPosition = () => {
-        this.notification.style.transform = `translateX(0)`
-    }
-
-    push = (messageHeader, messageBody, options) => {
-        let notification = document.createElement('div'),
-            composition = ``,
-            { pinned, type } = options;
-        notification.classList.add('notification')
-        if (pinned)
-            notification.classList.add('pinned')
-        composition += `
-                            <div class="inner-body">
-                        <header>
-        `
-        if (type === 'error') {
-            composition += `
-            <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
-                    <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
-                    <line x1="32" y1="24" x2="32" y2="36"/>
-                    <line x1="32" y1="46" x2="32" y2="48"/>
-            </svg>`
-        }
-        else if (type === 'success') {
-            composition += `
-                <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
-                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-                </svg>
-            `
-        }
-        composition += `
-                            <h4>${messageHeader}</h4>
-                            <svg class="icon close" viewBox="0 0 64 64">
-                                <title>Close</title>
-                                <line x1="64" y1="0" x2="0" y2="64"/>
-                                <line x1="64" y1="64" x2="0" y2="0"/>
-                            </svg>
-                        </header>
-                        <p>${messageBody}</p>
-                    </div>`
-        notification.innerHTML = composition
-        this.notificationPanel.prepend(notification)
-        if (window.innerWidth > 640) {
-            notification.animate([
-                {
-                    transform: `translateX(1rem)`,
-                    opacity: '0'
-                },
-                {
-                    transform: 'translateX(0)',
-                    opacity: '1'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `transform: none;`);
-            }
-        }
-        else {
-            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
-        }
-        notification.addEventListener('touchstart', this.handleTouchStart)
-        notification.addEventListener('touchmove', this.handleTouchMove)
-        notification.addEventListener('touchend', this.handleTouchEnd)
-    }
-
-    removeNotification = (notification, toLeft) => {
-        notification.style.height = notification.scrollHeight + 'px';
-        if (!this.offset)
-            this.offset = 0;
-        
-        if (toLeft)
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(-100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        else {
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        }
-        setTimeout( () => {
-            notification.remove()
-        }, this.animationOptions.duration*2)
-    }
-
-    connectedCallback() {
-        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
-        this.animationOptions = {
-            duration: 300,
-            fill: "forwards",
-            easing: "ease"
-        }
-        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
-        this.notification
-        this.offset
-        this.touchStartX = 0
-        this.touchEndX = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
-        this.touchEndAnimataion;
-
-        this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close'))(
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
-
-        const observer = new MutationObserver(mutationList => {
-            mutationList.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length) {
-                        if (!mutation.addedNodes[0].classList.contains('pinned'))
-                        setTimeout(() => {
-                            this.removeNotification(mutation.addedNodes[0])
-                        }, 4000);
-                        if (window.innerWidth > 640)
-                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
-                        else
-                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
-                    }
-                    else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
-                        this.notificationPanel.style.padding = 0;
-                    }
-                }
-            })
-        })
-        observer.observe(this.notificationPanel, {
-            attributes: true,
-            childList: true,
-            subtree: true
-        })
-    }
-})
-// sm-menu
-const smMenu = document.createElement('template')
-smMenu.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .menu{
-                display: grid;
-                place-items: center;
-                position: relative;
-                height: 2rem;
-                width: 2rem;
-                outline: none;
-            }
-            .icon {
-                position: absolute;
-                fill: rgba(var(--text-color), 0.7);
-                height: 2.4rem;
-                width: 2.4rem;
-                padding: 0.7rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                border-radius: 2rem;
-                transition: background 0.3s;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .menu:focus .icon,
-            .focused{
-                background: rgba(var(--text-color), 0.1); 
-            }
-            :host([align-options="left"]) .options{
-                left: 0;
-            }
-            :host([align-options="right"]) .options{
-                right: 0;
-            }
-            .options{
-                padding: 0.5rem 0;
-                overflow: hidden auto;
-                position: absolute;
-                display: flex;
-                min-width: 100%;
-                transform: translateY(-1rem);
-                flex-direction: column;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, transform 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-                top: 100%;
-                margin: 0.4rem 0 0 0;
-                bottom: auto;
-            }
-            .moveUp{
-                top: auto;
-                margin: 0 0 0.4rem 0;
-                bottom: 100%;
-                transform: translateY(1rem);
-            }
-            .moveLeft{
-                left: auto: 
-                right: 0;
-            }
-            .no-transformations{
-                transform: none !important;
-            }
-            @media (hover: hover){
-                .menu:hover .icon{
-                    background: rgba(var(--text-color), 0.1); 
-                }
-            }
-        </style>
-        <div class="select">
-            <div class="menu" tabindex="0">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <title>options</title>
-                    <circle cx="32" cy="6" r="5.5"/>
-                    <circle cx="32" cy="58" r="5.5"/>
-                    <circle cx="32" cy="31.89" r="5.5"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-menu', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenu.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    expand = () => {
-        if (!this.open) {
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-            this.optionList.classList.remove('hide')
-            this.optionList.classList.add('no-transformations')
-            this.open = true
-            this.icon.classList.add('focused')
-        }
-    }
-    collapse = () => {
-        if (this.open) {
-            this.open = false
-            this.icon.classList.remove('focused')
-            this.optionList.classList.add('hide')
-            this.optionList.classList.remove('no-transformations')
-        }
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.containerDimensions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            menu = this.shadowRoot.querySelector('.menu')
-        this.icon = this.shadowRoot.querySelector('.icon')
-        this.open = false;
-        menu.addEventListener('click', e => {
-            if (!this.open) {
-                this.expand()
-            } else {
-                this.collapse()
-            }
-        })
-        menu.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                if (!this.open) {
-                    this.expand()
-                } else {
-                    this.collapse()
-                }
-            }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.optionList.addEventListener('click', e => {
-            this.collapse()
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            this.containerDimensions = this.optionList.getBoundingClientRect()
-            this.menuDimensions = menu.getBoundingClientRect()
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-        });
-        window.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && e.button !== 2) {
-                this.collapse()
-            }
-        })
-        if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
-            this.parentNode.setAttribute('oncontextmenu', 'return false')
-            this.parentNode.addEventListener('mouseup', e => {
-                if (e.button === 2) {
-                    this.expand()
-                }
-            })
-        }
-        const intersectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (!entry.isIntersecting && this.open) {
-                    if(window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height)
-                        this.optionList.classList.add('moveUp')
-                    else
-                        this.optionList.classList.remove('moveUp')
-                    if (entry.intersectionRect.left > this.containerDimensions.width) {
-                        this.optionList.style.right = 0
-                    }
-                    else {
-                        this.optionList.style.right = 'auto'
-                    }
-                }
-            })
-        }, {
-                threshold: 1
-        })
-        intersectionObserver.observe(this.optionList)
-    }
-})
-
-// option
-const smMenuOption = document.createElement('template')
-smMenuOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.6rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                white-space: nowrap;
-                outline: none;
-                display: flex;
-                align-items: center;
-                text-transform: capitalize;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-menu-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenuOption.content.cloneNode(true))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.click()
-            }
-        })
-        this.setAttribute('tabindex', '0')
-    }
-})
\ No newline at end of file
diff --git a/Layouts/boxes layout/js/components.min.js b/Layouts/boxes layout/js/components.min.js
new file mode 100644
index 0000000..4f0c4e7
--- /dev/null
+++ b/Layouts/boxes layout/js/components.min.js	
@@ -0,0 +1,7 @@
+const smButton=document.createElement("template");smButton.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    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</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(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
+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 smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\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    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --font-size: 1rem;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    opacity: .7;\n    font-weight: 400;\n    font-size: var(--font-size);\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: var(--font-size);\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 1rem;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',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._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.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)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}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 isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <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>\n                        ${this._errorText}\n                        `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
+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 smPopup=document.createElement("template");smPopup.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: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    -webkit-transform: scale(1) translateY(100%);\n            transform: scale(1) translateY(100%);\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n    content-visibility: auto;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding);\n    overflow-y: auto;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    visiblity: none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.4rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-transform: scale(1) translateY(3rem);\n                transform: scale(1) translateY(3rem);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\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}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',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.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),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.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.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
+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);
\ No newline at end of file
diff --git a/Layouts/boxes layout/js/helper.js b/Layouts/boxes layout/js/helper.js
deleted file mode 100644
index a7c51ee..0000000
--- a/Layouts/boxes layout/js/helper.js	
+++ /dev/null
@@ -1,133 +0,0 @@
-if (!navigator.onLine)
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-window.addEventListener('offline', () => {
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-})
-window.addEventListener('online', () => {
-    notify('We are back online.', '', '', true)
-})
-let themeToggler = document.getElementById("theme_toggle")
-if (localStorage.theme === "dark") {
-    darkTheme()
-    themeToggler.checked = true;
-} else {
-    lightTheme()
-    themeToggler.checked = false;
-}
-
-function lightTheme() {
-    document.body.setAttribute("data-theme", "light");
-}
-
-function darkTheme() {
-    document.body.setAttribute("data-theme", "dark");
-}
-themeToggler.addEventListener("change", () => {
-    if (themeToggler.checked) {
-        darkTheme()
-        localStorage.setItem("theme", "dark");
-    } else {
-        lightTheme()
-        localStorage.setItem("theme", "light");
-    }
-})
-
-// function required for popups or modals to appear
-class Stack {
-    constructor() {
-        this.items = [];
-    }
-    push(element) {
-        this.items.push(element);
-    }
-    pop() {
-        if (this.items.length == 0)
-            return "Underflow";
-        return this.items.pop();
-    }
-    peek(index) {
-        let newIndex = index ? index : 1
-        return this.items[this.items.length - index];
-    }
-}
-let popupStack = new Stack(),
-    zIndex = 10;
-function showPopup(popup, permission) {
-    let thisPopup = document.getElementById(popup);
-    document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    popupStack.push({ thisPopup, permission })
-    thisPopup.show(permission, popupStack)
-    zIndex++;
-    thisPopup.setAttribute('style', `z-index: ${zIndex}`)
-    return thisPopup;
-}
-function setAttributes(el, attrs) {
-    for (var key in attrs) {
-        el.setAttribute(key, attrs[key]);
-    }
-}
-// displays a popup for asking permission. Use this instead of JS confirm
-let confirmation = function (message) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('confirmation');
-        showPopup('confirmation')
-        popup.querySelector('#confirm_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(true);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(false);
-        }
-    })
-}
-
-// displays a popup for asking user input. Use this instead of JS prompt
-let askPrompt = function (message, defaultVal) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('prompt'),
-            input = popup.querySelector('input');
-        if (defaultVal)
-            input.value = defaultVal;
-        showPopup('prompt')
-        input.focus()
-        input.addEventListener('keyup', e => {
-            if (e.key === 'Enter') {
-                resolve(input.value);
-                hidePopup()
-            }
-        })
-        popup.querySelector('#prompt_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(input.value);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(null);
-        }
-    })
-}
-
-function formatedTime(time) {
-    let timeFrag = new Date(parseInt(time)).toString().split(' '),
-        day = timeFrag[0],
-        month = timeFrag[1],
-        date = timeFrag[2],
-        year = timeFrag[3],
-        hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
-        finalTime = '';
-    parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
-    return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
-}
-
-function copyToClipboard(parent) {
-    let toast = document.getElementById('textCopied'),
-        textToCopy = parent.querySelector('.copy').textContent;
-    navigator.clipboard.writeText(textToCopy)
-    toast.classList.remove('hide');
-    setTimeout(() => {
-        toast.classList.add('hide');
-    }, 2000)
-}
\ No newline at end of file
diff --git a/Layouts/boxes layout/js/main_UI.js b/Layouts/boxes layout/js/main_UI.js
new file mode 100644
index 0000000..e60c9a9
--- /dev/null
+++ b/Layouts/boxes layout/js/main_UI.js	
@@ -0,0 +1,309 @@
+// Global variables
+const domRefs = {};
+const appPages = ['dashboard', 'settings']
+
+
+//Checks for internet connection status
+if (!navigator.onLine)
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { sound: true }
+    );
+window.addEventListener("offline", () => {
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { pinned: true, sound: true }
+    );
+});
+window.addEventListener("online", () => {
+    getRef("notification_drawer").clearAll();
+    notify("We are back online.", "success");
+});
+
+// Use instead of document.getElementById
+function getRef(elementId) {
+    if (!domRefs.hasOwnProperty(elementId)) {
+        domRefs[elementId] = {
+            count: 1,
+            ref: null,
+        };
+        return document.getElementById(elementId);
+    } else {
+        if (domRefs[elementId].count < 3) {
+            domRefs[elementId].count = domRefs[elementId].count + 1;
+            return document.getElementById(elementId);
+        } else {
+            if (!domRefs[elementId].ref)
+                domRefs[elementId].ref = document.getElementById(elementId);
+            return domRefs[elementId].ref;
+        }
+    }
+}
+
+// returns dom with specified element
+function createElement(tagName, obj) {
+    const { className, textContent, innerHTML, attributes = {} } = obj
+    const elem = document.createElement(tagName)
+    for (let attribute in attributes) {
+        elem.setAttribute(attribute, attributes[attribute])
+    }
+    if (className)
+        elem.className = className
+    if (textContent)
+        elem.textContent = textContent
+    if (innerHTML)
+        elem.innerHTML = innerHTML
+    return elem
+}
+
+// Use when a function needs to be executed after user finishes changes
+const debounce = (callback, wait) => {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}
+
+// Limits the rate of function execution
+let timerId;
+function throttle(func, delay) {
+    // If setTimeout is already scheduled, no need to do anything
+    if (timerId) {
+        return;
+    }
+
+    // Schedule a setTimeout after delay seconds
+    timerId = setTimeout(function () {
+        func();
+
+        // Once setTimeout function execution is finished, timerId = undefined so that in
+        // the next scroll event function execution can be scheduled by the setTimeout
+        timerId = undefined;
+    }, delay);
+}
+
+// function required for popups or modals to appear
+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];
+    }
+}
+let popupStack = new Stack(),
+    zIndex = 10;
+
+async function showPopup(popup, pinned) {
+    zIndex++
+    getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
+    popupStack = getRef(popup).show({ pinned, popupStack })
+    return getRef(popup);
+}
+
+// hides the popup or modal 
+function hidePopup() {
+    if (popupStack.peek() === undefined)
+        return;
+    popupStack.peek().popup.hide()
+}
+
+// displays a popup for asking permission. Use this instead of JS confirm
+let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+    return new Promise(resolve => {
+        showPopup('confirmation_popup', true)
+        getRef('confirm_title').textContent = title;
+        getRef('confirm_message').textContent = message;
+        let cancelButton = getRef('confirmation_popup').children[2].children[0],
+            submitButton = getRef('confirmation_popup').children[2].children[1]
+        submitButton.textContent = confirmText
+        cancelButton.textContent = cancelText
+        submitButton.onclick = () => {
+            hidePopup()
+            resolve(true);
+        }
+        cancelButton.onclick = () => {
+            hidePopup()
+            resolve(false);
+        }
+    })
+}
+
+// displays a popup for asking user input. Use this instead of JS prompt
+async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") {
+    showPopup('prompt_popup', true)
+    getRef('prompt_title').textContent = title;
+    let input = getRef('prompt_input');
+    input.setAttribute("placeholder", message)
+    let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
+    if (showText)
+        input.setAttribute("type", "text")
+    else
+        input.setAttribute("type", "password")
+    input.focusIn()
+    buttons[0].textContent = falseBtn;
+    buttons[1].textContent = trueBtn;
+    return new Promise((resolve, reject) => {
+        buttons[0].onclick = () => {
+            hidePopup()
+            return;
+        }
+        buttons[1].onclick = () => {
+            let value = input.value;
+            hidePopup()
+            resolve(value)
+        }
+    })
+}
+
+//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+function notify(message, mode, options = {}) {
+    const { pinned = false, sound } = options
+    if (mode === "error") console.error(message);
+    let icon
+    switch (mode) {
+        case 'success':
+            icon = `<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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+            break;
+        case 'error':
+            icon = `<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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+            break;
+    }
+    getRef("notification_drawer").push(message, { pinned, icon });
+    if (navigator.onLine && sound) {
+        getRef("notification_sound").currentTime = 0;
+        getRef("notification_sound").play();
+    }
+}
+
+const currentYear = new Date().getFullYear();
+function getFormatedTime(time, relative) {
+    try {
+        if (String(time).indexOf("_")) time = String(time).split("_")[0];
+        const intTime = parseInt(time);
+        if (String(intTime).length < 13) time *= 1000;
+        let timeFrag = new Date(intTime).toString().split(" "),
+            day = timeFrag[0],
+            month = timeFrag[1],
+            date = timeFrag[2],
+            year = timeFrag[3],
+            minutes = new Date(intTime).getMinutes(),
+            hours = new Date(intTime).getHours(),
+            currentTime = new Date().toString().split(" ");
+
+        minutes = minutes < 10 ? `0${minutes}` : minutes;
+        let finalHours = ``;
+        if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
+        else if (hours === 0) finalHours = `12:${minutes}`;
+        else finalHours = `${hours}:${minutes}`;
+
+        finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
+        if (relative) {
+            return `${date} ${month} ${year}`;
+        } else return `${finalHours} ${month} ${date} ${year}`;
+    } catch (e) {
+        console.error(e);
+        return time;
+    }
+}
+
+window.addEventListener('hashchange', e => showPage(window.location.hash))
+window.addEventListener("load", () => {
+    document.body.classList.remove('hide-completely')
+    showPage(window.location.hash)
+    // document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
+    document.addEventListener('keyup', (e) => {
+        if (e.code === 'Escape') {
+            hidePopup()
+        }
+    })
+    document.addEventListener("pointerdown", (e) => {
+        if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+            createRipple(e, e.target.closest("button, sm-button, .interact"));
+        }
+    });
+    document.addEventListener('copy', () => {
+        notify('copied', 'success')
+    })
+});
+
+function createRipple(event, target) {
+    const circle = document.createElement("span");
+    const diameter = Math.max(target.clientWidth, target.clientHeight);
+    const radius = diameter / 2;
+    const targetDimensions = target.getBoundingClientRect();
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+    circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+    circle.classList.add("ripple");
+    const rippleAnimation = circle.animate(
+        [
+            {
+                transform: "scale(3)",
+                opacity: 0,
+            },
+        ],
+        {
+            duration: 1000,
+            fill: "forwards",
+            easing: "ease-out",
+        }
+    );
+    target.append(circle);
+    rippleAnimation.onfinish = () => {
+        circle.remove();
+    };
+}
+
+function showPage(targetPage, options = {}) {
+    const { firstLoad, hashChange } = options
+    let pageId
+    if (targetPage === '') {
+        pageId = 'overview_page'
+    }
+    else {
+        pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
+    }
+    if(!appPages.includes(pageId)) return
+    document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
+    document.querySelector('.nav-list__item--active').classList.remove('nav-list__item--active')
+    getRef(pageId).classList.remove('hide-completely')
+    getRef(pageId).animate([
+        {
+            opacity: 0,
+            transform: 'translateX(-1rem)'
+        },
+        {
+            opacity: 1,
+            transform: 'none'
+        },
+    ],
+        {
+            duration: 300,
+            easing: 'ease'
+        })
+    const targetListItem = document.querySelector(`.nav-list__item[href="#${pageId}"]`)
+    targetListItem.classList.add('nav-list__item--active')
+    if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) {
+        getRef('side_nav').scrollTo({
+            top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
+            behavior: 'smooth'
+        })
+    }
+    if (hashChange && window.innerWidth < 640) {
+        getRef('side_nav').close()
+    }
+}
\ No newline at end of file
diff --git a/Layouts/many sections layout/css/main.css b/Layouts/many sections layout/css/main.css
index ed1d7e7..d7ca143 100644
--- a/Layouts/many sections layout/css/main.css	
+++ b/Layouts/many sections layout/css/main.css	
@@ -1,64 +1,88 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'Roboto', sans-serif;
+  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 {
-  --accent-color: #303F9F;
-  --text-color: 17, 17, 17;
-  --foreground-color: 255, 255, 255;
-  background: rgba(var(--foreground-color), 1);
   color: rgba(var(--text-color), 1);
-  font-size: 16px;
+  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"] {
-  --foreground-color: 20, 20, 20;
-  --text-color: 238, 238, 238;
-}
-
-main {
-  margin: 1.5rem;
-}
-
-h1, h2, h3, h4, h5 {
-  font-family: 'Poppins', sans-serif;
-  text-transform: capitalize;
-}
-
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.8rem;
+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 {
-  margin: 1.5rem 0;
+  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 {
+  object-fit: cover;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-button {
+  --border-radius: 0.3rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
 
 .hide {
   opacity: 0;
@@ -69,124 +93,258 @@ p {
   display: none !important;
 }
 
-.flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+.no-transformations {
+  transform: none !important;
 }
 
-.icon {
-  height: 1.2rem;
-  width: 1.2rem;
-  fill: none;
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.toggle {
-  position: relative;
-  cursor: pointer;
-  z-index: 1;
-  padding: 0;
-}
-
-.toggle input[type='checkbox'] {
-  display: none;
-}
-
-.toggle .switch {
-  overflow: hidden;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  justify-items: center;
-  padding: 0.2rem;
-  min-height: 1.6rem;
-  max-height: 1.6rem;
-  border-radius: 0.5rem;
-  position: relative;
-  margin: 0;
-}
-
-.toggle .circle {
-  border-radius: 0.5rem;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
-  fill: rgba(var(--text-color), 0.8);
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  height: 1.2rem;
-  width: 1.2rem;
-}
-
-.toggle .circle:first-of-type {
-  margin-bottom: 0.4rem;
-}
-
-.toggle .circle line {
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-}
-
-.toggle input:checked ~ .switch .circle {
-  -webkit-transform: translateY(-1.7rem);
-          transform: translateY(-1.7rem);
-}
-
-#navbar {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  position: -webkit-sticky;
-  position: sticky;
-  padding: 1.5rem 2rem;
-  left: 0;
-  right: 0;
-  top: 0;
-  background: rgba(var(--foreground-color), 1);
-  border-bottom: solid 1px rgba(var(--text-color), 0.16);
-  -webkit-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
-          box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
-  z-index: 3;
-}
-
-#logo {
-  display: -ms-grid;
-  display: grid;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.overflow-ellipsis {
   width: 100%;
-  -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
-  gap: 0.6rem 0.6rem;
-  margin-right: 1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-#logo h4 {
+.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;
+}
+
+.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: 0.8rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
   text-transform: capitalize;
-  font-size: 1.2rem;
-  font-weight: 600;
 }
 
-#logo h5 {
-  font-family: 'Roboto', sans-serif;
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.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: transparent;
+}
+
+.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: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+#confirmation_popup,
+#prompt_popup {
+  flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+  font-weight: 500;
+  margin-bottom: 0.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: 0.6rem;
+  margin-left: auto;
+}
+
+#main_header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  position: sticky;
+  padding: 1rem 1.5rem;
+  background: rgba(var(--background-color), 1);
+  border-bottom: solid 1px rgba(var(--text-color), 0.16);
+  z-index: 2;
+}
+
+#logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.5rem;
+  margin-right: 1rem;
+}
+#logo h4 {
+  text-transform: capitalize;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 0.2rem;
+}
+#logo h5 {
+  font-size: 0.8rem;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+}
 #logo #main_logo {
   height: 1.4rem;
   width: 1.4rem;
@@ -195,46 +353,36 @@ p {
 }
 
 .section {
+  display: flex;
+  flex-direction: column;
   margin-top: 3rem;
+  padding: 0 1.5rem;
 }
-
-.section h3 + p {
-  margin-top: 1rem;
-}
-
 .section:first-of-type {
   margin-top: 0;
 }
 
+.section__header {
+  display: flex;
+  padding: 1rem 0;
+  justify-content: space-between;
+}
+
 .card {
   padding: 1.5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   min-width: 20rem;
   border-radius: 0.5rem;
   margin-right: 1.5rem;
-  border: solid 1px rgba(var(--text-color), 0.2);
+  background-color: rgba(var(--text-color), 0.06);
 }
-
 .card h3 {
   font-weight: 500;
 }
 
-sm-menu {
-  margin-left: auto;
-}
-
-@media only screen and (min-width: 640px) {
-  main {
-    margin: 1.5rem 4vw;
+@media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 24rem;
   }
-  p {
-    max-width: 40rem;
-  }
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Layouts/many sections layout/css/main.min.css b/Layouts/many sections layout/css/main.min.css
new file mode 100644
index 0000000..ff9cf05
--- /dev/null
+++ b/Layouts/many sections layout/css/main.min.css	
@@ -0,0 +1 @@
+#logo h5,*{font-family:Roboto,sans-serif}*{padding:0;margin:0;box-sizing:border-box}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{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),.8)}p:not(:last-of-type){margin-bottom:1rem}img{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:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}ul{list-style:none}.hide{opacity:0;pointer-events:none}.hide-completely{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;-ms-hyphens:auto;-moz-hyphens:auto;-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}#logo h4,.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}#main_header,.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),.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),.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.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),.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}#main_header{display:flex;gap:1rem;position:sticky;padding:1rem 1.5rem;background:rgba(var(--background-color),1);border-bottom:solid 1px rgba(var(--text-color),.16);z-index:2}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{font-size:1rem;font-weight:600;margin-top:.2rem}#logo h5{font-size:.8rem;font-weight:400}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}.section{display:flex;flex-direction:column;margin-top:3rem;padding:0 1.5rem}.section:first-of-type{margin-top:0}.section__header{display:flex;padding:1rem 0;justify-content:space-between}.card{padding:1.5rem;display:flex;flex-direction:column;min-width:20rem;border-radius:.5rem;margin-right:1.5rem;background-color:rgba(var(--text-color),.06)}.card h3{font-weight:500}@media screen and (min-width:640px){sm-popup{--width:24rem}}
\ No newline at end of file
diff --git a/Layouts/many sections layout/css/main.scss b/Layouts/many sections layout/css/main.scss
index 5127a65..39d1731 100644
--- a/Layouts/many sections layout/css/main.scss	
+++ b/Layouts/many sections layout/css/main.scss	
@@ -1,51 +1,79 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
 *{
-    box-sizing: border-box;
     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{
-    --accent-color: #303F9F;
-    --text-color: 17, 17, 17;
-    --foreground-color: 255, 255, 255;
-    background: rgba(var(--foreground-color), 1);
+body {
+    &,
+    *{
+        --accent-color: #0D7377;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+        --danger-color: red;
+    }
     color: rgba(var(--text-color), 1);
-    font-size: 16px;
+    background: rgba(var(--background-color), 1);
 }
-body[data-theme="dark"]{
-    --foreground-color: 20, 20, 20;
-    --text-color: 238, 238, 238;
+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);
+    }
 }
-main{
-    margin: 1.5rem;
-}
-h1, h2, h3, h4, h5{
-    font-family: 'Poppins', sans-serif;
-    text-transform: capitalize;
-}
-h1{
-    font-size: 3rem;
-}
-h2{
-    font-size: 2rem;
-}
-h3{
-    font-size: 1.5rem;
-}
-h4{
-    font-size: 1rem;
-}
-h5{
-    font-size: 0.8rem;
-}
-p{
-    margin: 1.5rem 0;
+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;
+    }
+}
+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;
+    }
+}
+
+button{
+    display: inline-flex;
+    border: none;
+    background-color: inherit;
+}
+
+a:any-link:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-button{
+    --border-radius: 0.3rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
 }
 .hide{
     opacity: 0;
@@ -54,86 +82,206 @@ p{
 .hide-completely{
     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;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -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: 0.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: 0.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: transparent;
+}
+.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;
-    fill: none;
-    stroke: rgba(var(--text-color), 0.8);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-.toggle{
-    position: relative;
-    cursor: pointer;
-    z-index: 1;
-    padding: 0;
-    input[type='checkbox']{
-        display: none;
+    &--left{
+        margin-right: 0.5rem;
     }
-    .switch{
-        overflow: hidden;
-        display: inline-flex;
-        flex-direction: column;
-        justify-items: center;
-        padding: 0.2rem;
-        min-height: 1.6rem;
-        max-height: 1.6rem;
-        border-radius: 0.5rem;
-        position: relative;
+    &--right{
+        margin-left: 0.5rem;
+    }
+}
+#confirmation_popup,
+#prompt_popup {
+    flex-direction: column;
+    h4 {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+    }
+    sm-button{
         margin: 0;
     }
-    .circle{
-        border-radius: 0.5rem;
-        transition: transform 0.3s;
-        &:first-of-type{
-            margin-bottom: 0.4rem;
+    .flex {
+        padding: 0;
+        margin-top: 1rem;
+        sm-button:first-of-type {
+            margin-right: 0.6rem;
+            margin-left: auto;
         }
-        fill: rgba(var(--text-color), 0.8);
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        height: 1.2rem;
-        width: 1.2rem;
-        line{
-            stroke: rgba(var(--text-color), 0.8);
-            stroke-width: 6;
-        }
-    }
-    input:checked ~ .switch .circle{
-        transform: translateY(-1.7rem);
     }
 }
-#navbar{
+#main_header{
     display: flex;
+    gap: 1rem;
     align-items: center;
     position: sticky;
-    padding: 1.5rem 2rem;
-    left: 0;
-    right: 0;
-    top: 0;
-    background: rgba(var(--foreground-color), 1);
+    padding: 1rem 1.5rem;
+    background: rgba(var(--background-color), 1);
     border-bottom: solid 1px rgba(var(--text-color), 0.16);
-    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
-    z-index: 3;
+    z-index: 2;
 }
 #logo{
     display: grid;
     align-items: center;
     width: 100%;
     grid-template-columns: auto 1fr;
-    gap: 0.6rem 0.6rem;
+    gap: 0 0.5rem;
     margin-right: 1rem;
     h4{
         text-transform: capitalize;
-        font-size: 1.2rem;
+        font-size: 1rem;
         font-weight: 600;
+        margin-top: 0.2rem;
     }
     h5{
+        font-size: 0.8rem;
         font-family: 'Roboto', sans-serif;
         font-weight: 400;
     }
@@ -145,14 +293,19 @@ p{
     }
 }
 .section{
+    display: flex;
+    flex-direction: column;
     margin-top: 3rem;
-    h3 + p{
-        margin-top: 1rem;
-    }
+    padding: 0 1.5rem;
     &:first-of-type{
         margin-top: 0;
     }
 }
+.section__header{
+    display: flex;
+    padding: 1rem 0;
+    justify-content: space-between;
+}
 .card{
     padding: 1.5rem;
     display: flex;
@@ -160,19 +313,15 @@ p{
     min-width: 20rem;
     border-radius: 0.5rem;
     margin-right: 1.5rem;
-    border: solid 1px rgba(var(--text-color), 0.2);
+    background-color: rgba(var(--text-color), 0.06);
     h3{
         font-weight: 500;
     }
 }
-sm-menu{
-    margin-left: auto;
-}
-@media only screen and (min-width: 640px){
-    main{
-        margin: 1.5rem 4vw;
-    }
-    p{
-        max-width: 40rem;
+
+@media screen and (min-width: 640px) {
+    // for tablet and desktop
+    sm-popup{
+        --width: 24rem;
     }
 }
\ No newline at end of file
diff --git a/Layouts/many sections layout/index.html b/Layouts/many sections layout/index.html
index 42fb39a..584c09d 100644
--- a/Layouts/many sections layout/index.html	
+++ b/Layouts/many sections layout/index.html	
@@ -6,59 +6,66 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <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">
 </head>
 
-<body data-theme="light">
-    <nav id="navbar">
-        <div id="logo">
-            <svg id="main_logo" viewBox="0 0 27.25 32">
-                <title>RanchiMall</title>
-                <path
-                    d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
-            </svg>
-            <span>
-                <h5>RanchiMall</h5>
-                <h4>App name</h4>
-            </span>
+<body data-theme="light" class="hide-completely">
+    <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>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn">OK</button>
         </div>
-        <sm-input placeholder="search" oninput="console.log(this.value)"></sm-input>
-        <label class="toggle" title="Change theme">
-            <input type="checkbox" name="theme toggle" id="theme_toggle">
-            <div class="switch">
-                <svg class="circle" viewBox="0 0 64 64">
-                    <title>dark theme</title>
+    </sm-popup>
+    <sm-popup id="prompt_popup">
+        <h4 id="prompt_title"></h4>
+        <p id="prompt_message"></p>
+        <sm-input id="prompt_input"></sm-input>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
+        </div>
+    </sm-popup>
+    <article id="home" class="page">
+        <header id="main_header" class="full-bleed">
+            <div id="logo">
+                <svg id="main_logo" viewBox="0 0 27.25 32">
+                    <title>RanchiMall</title>
                     <path
-                        d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
-                        transform="translate(0 0)" />
-                </svg>
-                <svg class="circle" viewBox="0 0 64 64">
-                    <title>light theme</title>
-                    <circle cx="32" cy="32" r="13.9" />
-                    <line x1="32" y1="6.86" x2="32" />
-                    <line x1="32" y1="64" x2="32" y2="57.14" />
-                    <line x1="57.14" y1="32" x2="64" y2="32" />
-                    <line y1="32" x2="6.86" y2="32" />
-                    <line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
-                    <line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
-                    <line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
-                    <line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
+                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
                 </svg>
+                <div class="grid">
+                    <h5>RanchiMall</h5>
+                    <h4>App name</h4>
+                </div>
             </div>
-        </label>
-    </nav>
-    <main>
+            <sm-input placeholder="Search" type="search"></sm-input>
+            <theme-toggle></theme-toggle>
+        </header>
         <section class="section">
-            <div class="flex">
-                <h3>Section Heading</h3>
-                <sm-menu set-context="true">
-                    <sm-menu-option>first option</sm-menu-option>
-                    <sm-menu-option>second option</sm-menu-option>
-                    <sm-menu-option>third option</sm-menu-option>
+            <div class="section__header">
+                <div class="grid">
+                    <h3>Section Heading</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    </p>
+                </div>
+                <sm-menu align-options="right">
+                    <menu-option>first option</menu-option>
+                    <menu-option>second option</menu-option>
+                    <menu-option>third option</menu-option>
                 </sm-menu>
             </div>
-            <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </p>
             <sm-carousel>
                 <div class="card">
                     <h3>Card</h3>
@@ -87,17 +94,19 @@
             </sm-carousel>
         </section>
         <section class="section">
-            <div class="flex">
-                <h3>Section Heading</h3>
-                <sm-menu set-context="true">
-                    <sm-menu-option>first option</sm-menu-option>
-                    <sm-menu-option>second option</sm-menu-option>
-                    <sm-menu-option>third option</sm-menu-option>
+            <div class="section__header">
+                <div class="grid">
+                    <h3>Section Heading</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    </p>
+                </div>
+                <sm-menu align-options="right">
+                    <menu-option>first option</menu-option>
+                    <menu-option>second option</menu-option>
+                    <menu-option>third option</menu-option>
                 </sm-menu>
             </div>
-            <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </p>
             <sm-carousel>
                 <div class="card">
                     <h3>Card</h3>
@@ -126,17 +135,19 @@
             </sm-carousel>
         </section>
         <section class="section">
-            <div class="flex">
-                <h3>Section Heading</h3>
-                <sm-menu set-context="true">
-                    <sm-menu-option>first option</sm-menu-option>
-                    <sm-menu-option>second option</sm-menu-option>
-                    <sm-menu-option>third option</sm-menu-option>
+            <div class="section__header">
+                <div class="grid">
+                    <h3>Section Heading</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    </p>
+                </div>
+                <sm-menu align-options="right">
+                    <menu-option>first option</menu-option>
+                    <menu-option>second option</menu-option>
+                    <menu-option>third option</menu-option>
                 </sm-menu>
             </div>
-            <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </p>
             <sm-carousel>
                 <div class="card">
                     <h3>Card</h3>
@@ -164,23 +175,9 @@
                 </div>
             </sm-carousel>
         </section>
-    </main>
-    <script id="helper_functions" src="js/helper.js"></script>
-    <script src="js/components.js"></script>
-    <script id="UI_functions">
-        let allPages = document.querySelectorAll('.page'),
-            allTabs = document.querySelectorAll('.navbar-item');
-        function showPage(btn, page) {
-            allPages.forEach((page) => {
-                page.classList.add('hide-completely')
-            })
-            allTabs.forEach((tab) => {
-                tab.classList.remove('active')
-            })
-            document.getElementById(page).classList.remove('hide-completely')
-            btn.classList.add('active')
-        }
-    </script>
+    </article>
+    <script src="js/main_UI.js"></script>
+    <script src="js/components.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Layouts/many sections layout/js/components.js b/Layouts/many sections layout/js/components.js
deleted file mode 100644
index 30d8c2f..0000000
--- a/Layouts/many sections layout/js/components.js	
+++ /dev/null
@@ -1,2918 +0,0 @@
-//Button
-
-const smButton = document.createElement('template')
-smButton.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }       
-            :host{
-                display: inline-flex;
-            }
-            :host([disabled='true']) .button{
-                cursor: default;
-                opacity: 1;
-                background: rgba(var(--text-color), 0.4) !important;
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='primary']) .button{
-                background: var(--accent-color);
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='outlined']) .button{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            :host([variant='no-outline']) .button{
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            .button {
-                display: flex;
-                padding: 0.6rem 0.9rem;
-                cursor: pointer;
-                user-select: none;
-                border-radius: 0.2rem; 
-                justify-content: center;
-                transition: box-shadow 0.3s;
-                text-transform: uppercase;
-                font-weight: 500;
-                color: rgba(var(--text-color), 0.9);
-                letter-spacing: 0.1rem;
-                font-family: var(--font-family);
-                font-size: 0.9rem;
-                background: rgba(var(--text-color), 0.1); 
-                -webkit-tap-highlight-color: transparent;
-                outline: none;
-            }
-            :host(:not([disabled="true"])) .button:focus{
-                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:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-            }
-            @media (hover: hover){
-                :host(:not([disabled="true"])) .button:active{
-                    box-shadow: none !important;
-                }
-                :host([variant='outlined']) .button:active{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset !important;
-                }
-                :host(:not([disabled="true"])) .button:hover{
-                    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:hover{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                }
-            }
-            @media (hover: none){
-                :host(:not([disabled="true"])) .button:active{
-                    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{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)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 class="button" tabindex="0" role="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.getAttribute('disabled')
-        }
-
-        set disabled(val) {
-            this.setAttribute('disabled', val)
-        }
-
-        dispatch = () => {
-            if (this.getAttribute('disabled') === 'true') {
-                this.dispatchEvent(new CustomEvent('disabled', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-            else {
-                this.dispatchEvent(new CustomEvent('clicked', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-        }
-
-        connectedCallback() {
-            this.addEventListener('click', (e) => {
-                this.dispatch()
-            })
-            this.addEventListener('keyup', (e) => {
-                if (e.code === "Enter" || e.code === "Space")
-                    this.dispatch()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-        }
-    })
-
-//Input
-const smInput = document.createElement('template')
-smInput.innerHTML = `
-        <style>
-        *{
-            padding: 0;
-            margin: 0;
-            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:invalid{
-            outline: none;
-            box-shadow: none;
-        }
-        ::-moz-focus-inner{
-        border: none;
-        }
-        :host{
-            display: inline-flex;
-        }
-        .hide{
-           opacity: 0 !important;
-           pointer-events: none !important;
-        }
-        .icon {
-            fill: none;
-            height: 1.6rem;
-            width: 1.6rem;
-            padding: 0.5rem;
-            stroke: rgba(var(--text-color), 0.7);
-            stroke-width: 10;
-            overflow: visible;
-            stroke-linecap: round;
-            border-radius: 1rem;
-            stroke-linejoin: round;
-            cursor: pointer;
-            min-width: 0;
-        }
-        .input {
-            display: flex;
-            align-items: center;
-            position: relative;
-            gap: 1rem;
-            padding: 0.6rem 1rem;
-            border-radius: 0.2em;
-            transition: opacity 0.3s;
-            background: rgba(var(--text-color), 0.1);
-            font-family: var(--font-family);
-            width: 100%
-            outline: none;
-        }
-
-        input:focus{
-            caret-color: var(--accent-color);
-        }
-        .input:focus-within{
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-        }
-    
-        .label {
-            user-select: none;
-            opacity: .7;
-            font-weight: 400;
-            font-size: 1rem;
-            position: absolute;
-            top: 0;
-            transition: transform 0.3s;
-            -webkit-transform-origin: left;
-            transform-origin: left;
-            pointer-events: none;
-            will-change: transform;
-            text-transform: capitalize;
-        }
-        .container{
-            display: flex;
-            position: relative;
-            align-items: center;
-            flex: 1;
-        }    
-        input{
-            font-size: 1rem;
-            border: none;
-            background: transparent;
-            outline: none;
-            color: rgba(var(--text-color), 1);
-            width: 100%;
-        }
-        .animate-label .container input {
-            -webkit-transform: translateY(0.5rem);
-                    transform: translateY(0.5rem);
-            }
-          
-        .animate-label .container .label {
-            -webkit-transform: translateY(-60%) scale(0.7);
-                    transform: translateY(-60%) scale(0.7);
-            opacity: 1;
-            color: var(--accent-color)
-        }
-        .helper-text{
-            color: var(--error-color);
-            padding: 0.4rem 1rem;
-        }
-        @media (any-hover: hover){
-            .icon:hover{
-                background: rgba(var(--text-color), 0.1);
-            }
-        }
-    </style>
-    <label class="input">
-        <slot name = "icon"></slot>
-        <div class="container">
-            <input/>
-            <div class="label"></div>
-        </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
-    </label>
-    <div class="helper-text hide"></div>
-`;
-customElements.define('sm-input',
-    class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true))
-        }
-        static get observedAttributes() {
-            return ['placeholder']
-        }
-
-        get value() {
-            return this.shadowRoot.querySelector('input').value
-        }
-
-        set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
-        }
-
-        get placeholder() {
-            return this.getAttribute('placeholder')
-        }
-
-        set placeholder(val) {
-            this.setAttribute('placeholder', val)
-        }
-
-        get type() {
-            return this.getAttribute('type')
-        }
-
-        get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
-        }
-
-        preventNonNumericalInput = (e) => {
-            let keyCode = e.keyCode;
-            if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) {
-                e.preventDefault();
-            }
-        }
-
-        checkInput = () => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
-                return;
-            if (this.input.value !== '') {
-                if (this.animate)
-                    this.inputParent.classList.add('animate-label')
-                else
-                    this.label.classList.add('hide')
-                this.clearBtn.classList.remove('hide')
-            }
-            else {
-                if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
-                else
-                    this.label.classList.remove('hide')
-                this.clearBtn.classList.add('hide')
-            }
-            if (this.valueChanged) {
-                if (this.input.checkValidity()) {
-                    this.helperText.classList.add('hide')
-                    this.inputParent.style.boxShadow = ``
-                }
-                else {
-                    this.helperText.classList.remove('hide')
-                    this.inputParent.style.boxShadow = `0 0 0 0.1rem ${this.computedStyle.getPropertyValue('--error-color')}`
-                }
-            }
-        }
-
-        connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.computedStyle = window.getComputedStyle(this.inputParent)
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.helperText = this.shadowRoot.querySelector('.helper-text')
-            this.valueChanged = false;
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
-            if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('helper-text')) {
-                this.helperText.textContent = this.getAttribute('helper-text')
-            }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                }
-                else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            }
-            else
-                this.input.setAttribute('type', 'text')
-            this.input.addEventListener('keydown', e => {
-                if (this.getAttribute('type') === 'number')
-                    this.preventNonNumericalInput(e);
-            })
-            this.input.addEventListener('input', e => {
-                this.checkInput()
-            })
-            this.input.addEventListener('change', e => {
-                this.valueChanged = true;
-                if (this.input.checkValidity())
-                    this.helperText.classList.add('hide')
-                else
-                    this.helperText.classList.remove('hide')
-            })
-            this.clearBtn.addEventListener('click', e => {
-                this.input.value = ''
-                this.checkInput()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'placeholder')
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
-            }
-        }
-    })
-
-// tab-header
-
-const smTabs = document.createElement('template')
-smTabs.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: flex;
-}
-.tabs{
-    position: relative;
-    display: grid;
-    grid-template-rows: auto 1fr;
-}
-.panel-container{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    overflow: hidden auto;
-}
-.tab-header{
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: flex-start;
-    gap: 1rem;
-    position: relative;
-    overflow: auto hidden;
-    max-width: 100%;
-    scrollbar-width: 0;
-    margin-bottom: 1rem;
-}
-.indicator{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 0.15rem;
-    border-radius: 1rem 1rem 0 0;  
-    background: var(--accent-color);
-    transition: transform 0.3s, width 0.3s;
-}
-:host([variant="tab"]) .indicator{
-    height: 100%;
-    border-radius: 0.2rem
-}
-:host([variant="tab"]) .tab-header{
-    border-bottom: none; 
-}
-.hide-completely{
-    display: none;
-}
-:host([variant="tab"]) slot[name="tab"]::slotted(.active){
-    color: rgba(var(--foreground-color), 1);
-}
-
-slot[name="tab"]::slotted(.active){
-    color: var(--accent-color);
-    opacity: 1;
-}
-slot[name="panel"]::slotted(.hide-completely){
-    display: none;
-}
-@media (hover: none){
-    .tab-header::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    .tab-header::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-}         
-</style>
-<div class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot name="tab">Nothing to see here</slot>
-        <div class="indicator"></div>
-    </div>
-    <div part="panel-container" class="panel-container">
-        <slot name="panel">Nothing to see here</slot>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tabs', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true))
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
-        this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-    }
-    connectedCallback() {
-
-        //animations
-        let flyInLeft = [
-            {
-                opacity: 0,
-                transform: 'translateX(-1rem)'
-            },
-            {
-                opacity: 1,
-                transform: 'none'
-            }
-        ],
-            flyInRight = [
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyOutLeft = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                }
-            ],
-            flyOutRight = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                }
-            ],
-            animationOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-        this.prevTab
-        this.allTabs
-
-        this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => {
-            this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => {
-                panel.classList.add('hide-completely')
-            })
-        })
-        this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => {
-            this.allTabs = this.shadowRoot.querySelector('slot[name="tab"]').assignedElements();
-            this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => {
-                panel.setAttribute('rank', index + 1)
-            })
-        })
-        this._targetBodyFlyRight = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInRight, animationOptions)
-        }
-        this._targetBodyFlyLeft = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInLeft, animationOptions)
-        }
-        this.tabSlot.addEventListener('click', e => {
-            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
-                return
-            if (this.prevTab)
-                this.prevTab.classList.remove('active')
-            e.target.classList.add('active')
-
-            e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
-            this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-
-            if (this.prevTab) {
-                let targetBody = e.target.nextElementSibling,
-                    currentBody = this.prevTab.nextElementSibling;
-
-                if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyRight(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyRight(targetBody)
-                        }
-                    }
-                } else {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyLeft(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyLeft(targetBody)
-                        }
-                    }
-                }
-            } else {
-                e.target.nextElementSibling.classList.remove('hide-completely')
-            }
-            this.prevTab = e.target;
-        })
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => { 
-                if (this.prevTab) {
-                    let tabDimensions = this.prevTab.getBoundingClientRect();
-                    this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    let activeElement = this.tabSlot.assignedElements().filter(element => {
-                        if (element.classList.contains('active'))
-                            return true
-                    })
-                    if (activeElement.length) {
-                        let tabDimensions = activeElement[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                    }
-                    else {
-                        this.tabSlot.assignedElements()[0].classList.add('active')
-                        this.panelSlot.assignedElements()[0].classList.remove('hide-completely')
-                        let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                    }
-                }
-            })
-        },
-            { threshold: 1.0 })
-        observer.observe(this)
-        if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick') == 'true') {
-            let touchStartTime = 0,
-                touchEndTime = 0,
-                swipeTimeThreshold = 200,
-                swipeDistanceThreshold = 20,
-                startingPointX = 0,
-                endingPointX = 0,
-                currentIndex = 0;
-            this.addEventListener('touchstart', e => {
-                touchStartTime = e.timeStamp
-                startingPointX = e.changedTouches[0].clientX
-            })
-            this.panelSlot.addEventListener('touchend', e => {
-                touchEndTime = e.timeStamp
-                endingPointX = e.changedTouches[0].clientX
-                if (touchEndTime - touchStartTime < swipeTimeThreshold) {
-                    currentIndex = this.allTabs.findIndex(element => element.classList.contains('active'))
-                    if (startingPointX > endingPointX && startingPointX - endingPointX > swipeDistanceThreshold && currentIndex < this.allTabs.length) {
-                        this.allTabs[currentIndex + 1].click()
-                    }
-                    else if (startingPointX < endingPointX && endingPointX - startingPointX > swipeDistanceThreshold && currentIndex > 0) {
-                        this.allTabs[currentIndex - 1].click()
-                    }
-                }
-            })
-        }
-    }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    position: relative;
-    display: inline-flex;
-    z-index: 1;
-}
-.tab{
-    position: relative;
-    user-select: none;
-    justify-content: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    white-space: nowrap;
-    padding: 0.6rem 0.8rem;
-    font-weight: 500;
-    word-spacing: 0.1em;
-    text-align: center;
-    transition: color 0.3s;
-    text-transform: capitalize;
-    font-family: var(--font-family);
-}
-@media (hover: hover){
-    :host(.active) .tab{
-        opacity: 1;
-    }
-    .tab{
-        opacity: 0.7
-    }
-    .tab:hover{
-        opacity: 1
-    }
-}
-</style>
-<div class="tab">
-    <slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true))
-    }
-})
-
-//chcekbox
-
-const smCheckbox = document.createElement('template')
-smCheckbox.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: inline-flex;
-}
-.checkbox {
-    position: relative;
-    display:flex;
-    align-items: center;
-    cursor: pointer;
-    height: 1.5rem;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-}
-
-p{
-    margin-left: 2rem;
-}
-
-.checkbox:active .icon,
-.checkbox:focus .icon{
-    background: rgba(var(--text-color), 0.2);
-}
-
-.checkbox input {
-  display: none;
-}
-
-.checkbox .checkmark {
-    stroke-dashoffset: -65;
-    stroke-dasharray: 65;
-    -webkit-transition: stroke-dashoffset 0.3s; 
-    transition: stroke-dashoffset 0.3s;
-}
-
-.checkbox input:checked ~ svg .checkmark {
-    stroke-dashoffset: 0;
-    stroke: rgba(var(--foreground-color), 1);
-}
-.checkbox input:checked ~ svg {
-    stroke: var(--accent-color);
-    fill: var(--accent-color);
-    stroke-width: 8; 
-}
-
-.icon {
-    position: absolute;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.7rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    border-radius: 2rem;
-    transition: background 0.3s;
-    left: -0.5rem;
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-</style>
-<label class="checkbox" tabindex="0">
-    <input type="checkbox">
-    <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
-        <rect class="box" x="0" y="0" width="64" height="64" rx="4" />
-        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
-    </svg>
-    <p><slot></slot></p>
-</label>`
-customElements.define('sm-checkbox', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smCheckbox.content.cloneNode(true))
-        
-        this.checkbox = this.shadowRoot.querySelector('.checkbox');
-        this.input = this.shadowRoot.querySelector('input')
-        
-        this.isChecked = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.getAttribute('checked')
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.checkbox.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.checkbox.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-
-})
-
-//audio
-
-const smAudio = document.createElement('template')
-smAudio.innerHTML = `
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-	display: flex;
-}
-
-.audio{
-  position: relative;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-align: center;
-          align-items: center;
-  -webkit-user-select: none;
-          user-select: none;
-  padding: 0.6rem;
-  border-radius: 0.2rem;
-  background: rgba(var(--text-color), 0.08);
-  overflow: hidden;
-  width: 100%;
-}
-
-.hide {
-  display: none;
-}
-
-.icon{
-  stroke: rgba(var(--text-color), 1);
-  stroke-width: 6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-  overflow: visible;
-  height: 2.1rem;
-  width: 2.1rem;
-  padding: 0.6rem;
-  cursor: pointer;
-  border-radius: 2rem;
-  margin-right: 0.5rem;
-}
-
-.icon:hover{
-  background: rgba(var(--text-color), 0.1);
-}
-
-audio {
-  display: none;
-}
-
-.track {
-  position: absolute;
-  height: 0.2rem;
-  bottom: 0;
-  background: var(--accent-color);
-  left: 0;
-  -webkit-transition: width 0.2s;
-  transition: width 0.2s;
-  pointer-events: none;
-  z-index: 0;
-  border-radius: 0.2rem;
-}
-
-.disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-</style>
-	<div class="audio">
-		<svg class="icon play" viewBox="-6 0 64 64">
-			<title>play</title>
-			<path d="M57.12,26.79,12.88,1.31a6,6,0,0,0-9,5.21v51a6,6,0,0,0,9,5.21L57.12,37.21A6,6,0,0,0,57.12,26.79Z"/>
-		</svg>
-		<svg class="icon pause hide" viewBox="0 0 64 64">
-			<title>pause</title>
-			<line x1="17.5" x2="17.5" y2="64"/>
-			<line x1="46.5" x2="46.5" y2="64"/>
-		</svg>
-		<h5 class="current-time"></h5> / <h5 class="duration"></h5>
-		<audio src=""></audio>
-		<div class="track"></div>
-	</audio>
-`;
-
-customElements.define('sm-audio', class extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' }).append(smAudio.content.cloneNode(true))
-
-        this.playing = false;
-    }
-    static get observedAttributes() {
-        return ['src']
-    }
-    play() {
-        this.audio.play()
-        this.playing = false;
-        this.pauseBtn.classList.remove('hide')
-        this.playBtn.classList.add('hide')
-    }
-    pause() {
-        this.audio.pause()
-        this.playing = true;
-        this.pauseBtn.classList.add('hide')
-        this.playBtn.classList.remove('hide')
-    }
-
-    get isPlaying() {
-        return this.playing;
-    }
-
-    connectedCallback() {
-        this.playBtn = this.shadowRoot.querySelector('.play');
-        this.pauseBtn = this.shadowRoot.querySelector('.pause');
-        this.audio = this.shadowRoot.querySelector('audio')
-        this.playBtn.addEventListener('click', e => {
-            this.play()
-        })
-        this.pauseBtn.addEventListener('click', e => {
-            this.pause()
-        })
-        this.audio.addEventListener('ended', e => {
-            this.pause()
-        })
-        let width;
-        if ('ResizeObserver' in window) {
-            let resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    width = entry.contentRect.width;
-                })
-            })
-            resizeObserver.observe(this)
-        }
-        else {
-            let observer = new IntersectionObserver((entries, observer) => {
-                if (entries[0].isIntersecting)
-                    width = this.shadowRoot.querySelector('.audio').offsetWidth;
-            }, {
-                threshold: 1
-            })
-            observer.observe(this)
-        }
-        this.audio.addEventListener('timeupdate', e => {
-            let time = this.audio.currentTime,
-                minutes = Math.floor(time / 60),
-                seconds = Math.floor(time - minutes * 60),
-                y = seconds < 10 ? "0" + seconds : seconds;
-            this.shadowRoot.querySelector('.current-time').textContent = `${minutes}:${y}`
-            this.shadowRoot.querySelector('.track').style.width = (width / this.audio.duration) * this.audio.currentTime + 'px'
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'src') {
-                if (this.hasAttribute('src') && newValue.trim() !== '') {
-                    this.shadowRoot.querySelector('audio').src = newValue;
-                    this.shadowRoot.querySelector('audio').onloadedmetadata = () => {
-                        let duration = this.audio.duration,
-                            minutes = Math.floor(duration / 60),
-                            seconds = Math.floor(duration - minutes * 60),
-                            y = seconds < 10 ? "0" + seconds : seconds;
-                        this.shadowRoot.querySelector('.duration').textContent = `${minutes}:${y}`;
-                    }
-                }
-                else
-                    this.classList.add('disabled')
-            }
-        }
-    }
-})
-
-//switch
-
-const smSwitch = document.createElement('template')
-smSwitch.innerHTML = `	
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-    display: inline-flex;
-}
-.switch {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 2.4rem;
-    padding: 0.2rem;
-    cursor: pointer;
-    outline: none;
-    border-radius: 2rem;
-    -webkit-tap-highlight-color: transparent;
-}
-
-input {
-    display: none;
-}
-
-.track {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1.4rem;
-    -webkit-transition: background 0.3s;
-    transition: background 0.3s;
-    background: rgba(var(--text-color), 0.4);
-    box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-    border-radius: 1rem;
-}
-
-.switch:active .button::after,
-.switch:focus .button::after{
-    opacity: 1
-}
-.switch:focus:not(:focus-visible){
-    opacity: 0;
-}
-.switch:focus-visible .button::after{
-    opacity: 1
-}
-
-.button::after{
-    content: '';
-    display: flex;
-    position: absolute;
-    height: 2.6rem;
-    width: 2.6rem;
-    background: rgba(var(--text-color), 0.2);
-    border-radius: 2rem;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.button {
-    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;
-    transition: transform 0.3s;
-    border: solid 0.3rem rgba(var(--foreground-color), 1);
-}
-
-input:checked ~ .button {
-    transform: translateX(100%);
-}
-
-input:checked ~ .track {
-    background: var(--accent-color);
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-</style>
-<label class="switch" tabindex="0">
-    <input type="checkbox">
-    <div class="track"></div>
-    <div class="button"></div>
-</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
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.switch.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.switch.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-})
-
-// select
-const smSelect = document.createElement('template')
-smSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .icon {
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .option-text{
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .selection{
-                border-radius: 0.2rem;
-                display: grid;
-                grid-template-columns: 1fr auto;
-                grid-template-areas: 'heading heading' '. .';
-                padding: 0.4rem 1rem;
-                background: rgba(var(--text-color), 0.06);
-                border: solid 1px rgba(var(--text-color), 0.2);
-                align-items: center;
-                outline: none;
-            }
-            .selection:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) 
-            }
-            .icon{
-                margin-left: 1rem;
-            }
-            :host([align-select="left"]) .options{
-                left: 0;
-            }
-            :host([align-select="right"]) .options{
-                right: 0;
-            }
-            .options{
-                top: 100%;
-                margin-top: 0.5rem; 
-                overflow: hidden auto;
-                position: absolute;
-                grid-area: options;
-                display: flex;
-                flex-direction: column;
-                min-width: 100%;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, top 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-            }
-            .rotate{
-                transform: rotate(180deg)
-            }
-        </style>
-        <div class="select" >
-            <div class="selection" tabindex="0">
-                <div class="option-text"></div>
-                <svg class="icon toggle" viewBox="0 0 64 64">
-                    <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-
-    collapse = () => {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
-        this.chevron.classList.remove('rotate')
-        this.open = false
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        this.chevron = this.shadowRoot.querySelector('.toggle')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            selection = this.shadowRoot.querySelector('.selection'),
-            previousOption
-        this.open = false;
-            this.slideDown = [
-                { transform: `translateY(-0.5rem)` },
-                { transform: `translateY(0)` }
-            ],
-            this.slideUp = [
-                { transform: `translateY(0)` },
-                { transform: `translateY(-0.5rem)` }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
-            }
-        selection.addEventListener('click', e => {
-            if (!this.open) {
-                this.optionList.classList.remove('hide')
-                this.optionList.animate(this.slideDown, this.animationOptions)
-                this.chevron.classList.add('rotate')
-                this.open = true
-            } else {
-                this.collapse()
-            }
-        })
-        selection.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space')
-                if (!this.open) {
-                    this.optionList.classList.remove('hide')
-                    this.optionList.animate(this.slideDown, this.animationOptions)
-                    this.chevron.classList.add('rotate')
-                    this.open = true
-                } else {
-                    this.collapse()
-                }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.addEventListener('optionSelected', e => {
-            if (previousOption !== e.target) {
-                this.setAttribute('value', e.detail.value)
-                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true
-                }))
-                if (previousOption) {
-                    previousOption.classList.remove('check-selected')
-                }
-                previousOption = e.target;
-            }
-            if(!e.detail.switching)
-                this.collapse()
-
-            e.target.classList.add('check-selected')
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                this.availableOptions.forEach((element, index) => {
-                    element.setAttribute('data-rank', index + 1);
-                    element.setAttribute('tabindex', "0");
-                })
-            }
-        });
-        document.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && this.open) {
-                this.collapse()
-            }
-        })
-    }
-})
-
-// option
-const smOption = document.createElement('template')
-smOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.2rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                display: flex;
-                align-items: center;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            :host(:focus) .option .icon{
-                opacity: 0.4
-            }
-            :host(.check-selected) .icon{
-                opacity: 1 !important
-            }
-            .icon {
-                margin-right: 0.8rem;
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                border-radius: 1rem;
-                stroke-linejoin: round;
-                opacity: 0;
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-                .option:hover .icon{
-                    opacity: 0.4
-                }
-            }
-        </style>
-        <div class="option">
-            <svg class="icon" viewBox="0 0 64 64">
-                <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-            </svg>
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true))
-    }
-
-    sendDetails = (switching) => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value'),
-                switching: switching
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        let validKey = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ]
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-            if (validKey.includes(e.code)) {
-                e.preventDefault()
-                this.sendDetails(true)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }    
-            :host{
-                display: flex;
-            }
-            .icon {
-                position: absolute;
-                display: flex;
-                fill: none;
-                height: 2.6rem;
-                width: 2.6rem;
-                padding: 0.9rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                cursor: pointer;
-                min-width: 0;
-                z-index: 1;
-                background: rgba(var(--foreground-color), 1);
-                -webkit-tap-highlight-color: transparent;
-                transition: opacity 0.3s; 
-            }
-            .hide{
-                pointer-events: none;
-                opacity: 0;
-            }
-            .select-container{
-                position: relative;
-                display: flex;
-                width: 100%;
-                align-items: center;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                gap: 0.5rem;
-                max-width: 100%;
-                overflow: auto hidden;
-            }
-            .previous-item{
-                left: 0;
-            }
-            .next-item{
-                right: 0;
-            }
-            .left,.right{
-                position: absolute;
-                width: 1rem;
-                height: 100%; 
-                transition: opacity 0.3s;
-                z-index: 1;
-            }
-            .left{
-                background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-            }
-            .right{
-                right: 0;
-                background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-            }
-            slot::slotted(.active){
-                border-radius: 2rem;
-                opacity: 1;
-                background-color: rgba(var(--text-color), .6);  
-                color: rgba(var(--foreground-color), 1);
-            }
-            @media (hover: none){
-                ::-webkit-scrollbar-track {
-                    -webkit-box-shadow: none !important;
-                    background-color: transparent !important;
-                }
-                ::-webkit-scrollbar {
-                    height: 0;
-                    background-color: transparent;
-                }
-                .icon{
-                    display: none;
-                }
-                .left,.right{
-                    display: block;
-                }
-            }
-            @media (hover: hover){
-                .select{
-                    overflow: hidden;
-                }
-                .left,.right{
-                    display: none;
-                }
-            }
-        </style>
-        <div class="select-container">
-            <div class="left hide"></div>
-            <svg class="icon previous-item hide" viewBox="4 0 64 64">
-                <title>Previous</title>
-                <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-            </svg>
-            <div class="select">
-                <slot></slot> 
-            </div>
-            <svg class="icon next-item hide" viewBox="-6 0 64 64">
-                <title>Next</title>
-                <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-            </svg>
-            <div class="right hide"></div>
-        </div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            }
-            else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                padding: 0.4rem 0.8rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                border-radius: 2rem;
-                text-transform: capitalize;
-                border: solid 1px rgba(var(--text-color), .3);
-                opacity: 0.9;
-            }
-            .option:focus{
-                background: rgba(var(--text-color), 0.1);
-            }
-
-            @media (hover: hover){
-                .option{
-                    transition: background 0.3s;
-                }
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option" tabindex="0">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
-    }
-    sendDetails = () => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-//popup
-const smPopup = document.createElement('template')
-smPopup.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: grid;
-    }
-    .popup-container{
-        display: grid;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        place-items: center;
-        background: #00000060;
-        z-index: 10;
-        transition: opacity 0.3s ease;
-    }
-    .popup{
-        flex-direction: column;
-        align-self: flex-end;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        width: 100%;
-        border-radius: 0.5rem 0.5rem 0 0;
-        position: relative;
-        display: flex;
-        transform: translateY(100%);
-        transition: transform 0.3s;
-        background: rgba(var(--foreground-color), 1);
-        box-shadow: 0 -1rem 2rem #00000020;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-    .container-header{
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-    }
-    .popup-top{
-        display: flex;
-        width: 100%;
-    }
-    .popup-body{
-        padding: 1.5rem;
-    }
-    .heading{
-        font-weight: 400;
-    }
-    .heading:first-letter{
-        text-transform: uppercase;
-    }
-    .hide{
-        opacity: 0;
-        pointer-events: none;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        padding: 0.4rem;
-        stroke: rgba(var(--text-color), 0.7);
-        stroke-width: 8;
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        -webkit-tap-highlight-color: transparent;
-    }
-    @media screen and (min-width: 640px){
-        .popup{
-            width: 24rem;
-            align-self: center;
-            border-radius: 0.4rem;
-            height: auto;
-            transform: translateY(0) scale(0.9);
-            box-shadow: 0 2rem 2rem #00000040;
-        }
-        .container-header{
-            padding: 1.2rem 1.5rem;
-        }
-    }
-    @media screen and (max-width: 640px){
-        .popup-top{
-            flex-direction: column;
-            align-items: center;
-        }
-        .handle{
-            height: 0.3rem;
-            width: 2rem;
-            background: rgba(var(--text-color), .2);
-            border-radius: 1rem;
-            margin: 0.5rem 0;
-        }
-        .heading{
-            padding: 1rem 1.5rem
-        }
-        .close{
-            height: 2rem;
-            width: 2rem;
-            padding: 0.55rem;
-            margin-right: 1rem;
-        }
-    }
-</style>
-<div class="popup-container hide" role="dialog">
-    <div class="popup">
-        <div class="popup-top">
-            <div class="handle"></div>
-            <div class="container-header">
-                <h3 class="heading"></h3>
-                <svg class="icon close" viewBox="0 0 64 64">
-                    <title>Close</title>
-                    <line x1="64" y1="0" x2="0" y2="64"/>
-                    <line x1="64" y1="64" x2="0" y2="0"/>
-                </svg>
-            </div>
-        </div>
-        <div 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))
-    }
-
-    resumeScrolling = () => {
-        const scrollY = document.body.style.top;
-        window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.setAttribute('style', `overflow: auto; top: initial`)
-        }, 300);
-    }
-
-    show(pinned, popupStack) {
-        this.pinned = pinned
-        this.popupStack = popupStack
-        this.popupContainer.classList.remove('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(0)';
-        else
-            this.popup.style.transform = 'scale(1)';
-        document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    }
-    hide() {
-        this.popupContainer.classList.add('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(100%)';
-        else
-            this.popup.style.transform = 'scale(0.9)';
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length === 0) {
-                this.resumeScrolling()
-            }
-        }
-        else {
-           this.resumeScrolling()
-        }
-    }
-
-    handleTouchStart = (e) => {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartY < e.changedTouches[0].clientY) {
-            this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(this.movePopup)
-        }
-        /*else {
-        offset = touchStartY - e.changedTouches[0].clientY;
-        this.popup.style.transform = `translateY(-${offset}px)`
-    }*/
-    }
-
-    handleTouchEnd = (e) => {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndY - this.touchStartY > this.threshold) {
-                this.hide()
-            }
-            else {
-                this.show()
-            }
-        }
-        else {
-            if (this.touchEndY > this.touchStartY)
-                this.hide()
-        }
-    }
-
-    movePopup = () => {
-        this.popup.style.transform = `translateY(${this.offset}px)`
-    }
-
-    connectedCallback() {
-        this.pinned = false
-        this.popupStack
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.offset
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-        this.touchEndAnimataion;
-        
-        if (this.hasAttribute('heading'))
-            this.shadowRoot.querySelector('.heading').textContent = this.getAttribute('heading')
-                
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                this.hide()
-            }
-        })
-
-        this.shadowRoot.querySelector('.close').addEventListener('click', e => {
-            this.hide()
-        })
-
-        this.popupHeader.addEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.addEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.addEventListener('touchend', this.handleTouchEnd)
-    }
-    disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
-    }
-})
-
-//carousel
-
-const smCarousel = document.createElement('template')
-smCarousel.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .icon {
-        position: absolute;
-        display: flex;
-        fill: none;
-        height: 2.6rem;
-        width: 2.6rem;
-        border-radius: 3rem;
-        padding: 0.9rem;
-        stroke: rgba(var(--foreground-color), 0.8);
-        stroke-width: 14;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        background: rgba(var(--text-color), 1);
-        box-shadow: 0 0.2rem 0.2rem #00000020, 
-                    0 0.5rem 1rem #00000040; 
-        -webkit-tap-highlight-color: transparent;
-        transform: scale(0)
-    }
-    .hide{
-        pointer-events: none;
-        opacity: 0;
-    }
-    .expand{
-        transform: scale(1)
-    }
-    .previous-item{
-        left: 1rem;
-    }
-    .next-item{
-        right: 1rem;
-    }
-    .left,.right{
-        position: absolute;
-        width: 2rem;
-        height: 100%; 
-        transition: opacity 0.3s;
-    }
-    .left{
-        background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .right{
-        right: 0;
-        background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .carousel-container{
-        position: relative;
-        display: flex;
-        width: 100%;
-        align-items: center;
-    }
-    .carousel{
-        display: flex;
-        max-width: 100%;
-        overflow: auto hidden;
-        scroll-snap-type: x mandatory;
-    }
-    slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="start"]) slot::slotted(*){
-        scroll-snap-align: start;
-    }
-    :host([align-items="center"]) slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="end"]) slot::slotted(*){
-        scroll-snap-align: end;
-    }
-    @media (hover: hover){
-        .carousel{
-            overflow: hidden;
-        }
-        .left,.right{
-            display: none;
-        }
-    }
-    @media (hover: none){
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        ::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-        .carousel{
-            overflow: auto none;
-        }
-        .icon{
-            display: none;
-        }
-        .left,.right{
-            display: block;
-        }
-    }
-</style>
-<div class="carousel-container">
-    <div class="left"></div>
-    <svg class="icon previous-item" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="carousel">
-        <slot></slot>
-    </div>
-    <svg class="icon next-item" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right"></div>
-</div>
-`;
-
-customElements.define('sm-carousel', class extends HTMLElement{
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
-    }
-
-    scrollLeft = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    connectedCallback() {
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.carouselItems
-        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width/3
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.previousArrow.classList.remove('expand')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.add('expand')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })        
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.nextArrow.classList.remove('expand')
-                this.nextGradient.classList.add('hide')
-            }
-            else{
-                this.nextArrow.classList.add('expand')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })     
-        
-        const carouselObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-            }
-        })
-
-        carouselObserver.observe(this.carouselContainer)
-        
-        this.carouselSlot.addEventListener('slotchange', e => {
-            this.carouselItems = this.carouselSlot.assignedElements()
-            firstElementObserver.observe(this.carouselItems[0])
-            lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
-        })
-
-        this.addEventListener('keyup', e => {
-            if (e.code === 'ArrowLeft')
-                this.scrollRight()
-            else
-                this.scrollRight()
-        })
-
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-//notifications
-
-const smNotifications = document.createElement('template')
-smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: grid;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 100;
-        max-height: 100%;
-        overflow: hidden auto;
-        overscroll-behavior: contain;
-    }
-    .inner-body{
-        padding: 1rem 1.5rem;
-    }
-    .no-transformations{
-        transform: none;
-        opacity: 1;
-    }
-    .notification{
-        opacity: 0;
-        transform: translateY(-1rem);
-        position: relative;
-        border-radius: 0.3rem;
-        box-shadow: 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-        background: rgba(var(--foreground-color), 1);
-        transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        overflow: hidden;
-        border-bottom: 1px solid rgba(var(--text-color), 0.2);
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        color: rgba(var(--text-color), 0.8);
-        overflow-wrap: break-word;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    header{
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.4rem;
-        width: 100%;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        stroke: rgba(var(--text-color), 0.7);
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-    }
-    .error-icon{
-        stroke: #E53935;
-    }
-    .success-icon{
-        stroke: #00C853;
-    }
-    .close{
-        margin-left: auto;
-        padding: 0.5rem;
-        stroke-width: 10;
-    }
-    .notification-icon{
-        height: 1.2rem;
-        width: 1.2rem;
-        margin-right: 0.6rem;
-        stroke-width: 6;
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            width: 40vw;
-        }
-        .notification{
-            margin-right: 1.5rem;
-            margin-bottom: 1rem;
-            border-bottom: none;
-            border: solid 1px rgba(var(--text-color), 0.2);
-            transform: translateX(1rem);
-        }
-    }
-    @media screen and (max-width: 640px){
-        .close{
-            display: none
-        }
-    }
-</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(true))
-    }
-
-    handleTouchStart = (e) => {
-        this.notification = e.target.closest('.notification')
-        this.touchStartX = e.changedTouches[0].clientX
-        this.notification.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartX < e.changedTouches[0].clientX) {
-            this.offset = e.changedTouches[0].clientX - this.touchStartX;
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-        else {
-            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-    }
-
-    handleTouchEnd = (e) => {
-        this.notification.style.transition = 'height 0.3s, transform 0.3s, opacity 0.3s'
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndX = e.changedTouches[0].clientX
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndX - this.touchStartX > this.threshold) {
-                this.removeNotification(this.notification)
-            }
-            else if (this.touchStartX - this.touchEndX > this.threshold) {
-                this.removeNotification(this.notification, true)
-            }
-            else {
-                this.resetPosition()
-            }
-        }
-        else {
-            if (this.touchEndX > this.touchStartX) {
-                this.removeNotification(this.notification)
-            }
-            else {
-                this.removeNotification(this.notification, true)
-            }
-        }
-    }
-
-    movePopup = () => {
-        this.notification.style.transform = `translateX(${this.offset}px)`
-    }
-
-    resetPosition = () => {
-        this.notification.style.transform = `translateX(0)`
-    }
-
-    push = (messageHeader, messageBody, options) => {
-        let notification = document.createElement('div'),
-            composition = ``,
-            { pinned, type } = options;
-        notification.classList.add('notification')
-        if (pinned)
-            notification.classList.add('pinned')
-        composition += `
-                            <div class="inner-body">
-                        <header>
-        `
-        if (type === 'error') {
-            composition += `
-            <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
-                    <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
-                    <line x1="32" y1="24" x2="32" y2="36"/>
-                    <line x1="32" y1="46" x2="32" y2="48"/>
-            </svg>`
-        }
-        else if (type === 'success') {
-            composition += `
-                <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
-                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-                </svg>
-            `
-        }
-        composition += `
-                            <h4>${messageHeader}</h4>
-                            <svg class="icon close" viewBox="0 0 64 64">
-                                <title>Close</title>
-                                <line x1="64" y1="0" x2="0" y2="64"/>
-                                <line x1="64" y1="64" x2="0" y2="0"/>
-                            </svg>
-                        </header>
-                        <p>${messageBody}</p>
-                    </div>`
-        notification.innerHTML = composition
-        this.notificationPanel.prepend(notification)
-        if (window.innerWidth > 640) {
-            notification.animate([
-                {
-                    transform: `translateX(1rem)`,
-                    opacity: '0'
-                },
-                {
-                    transform: 'translateX(0)',
-                    opacity: '1'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `transform: none;`);
-            }
-        }
-        else {
-            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
-        }
-        notification.addEventListener('touchstart', this.handleTouchStart)
-        notification.addEventListener('touchmove', this.handleTouchMove)
-        notification.addEventListener('touchend', this.handleTouchEnd)
-    }
-
-    removeNotification = (notification, toLeft) => {
-        notification.style.height = notification.scrollHeight + 'px';
-        if (!this.offset)
-            this.offset = 0;
-        
-        if (toLeft)
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(-100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        else {
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        }
-        setTimeout( () => {
-            notification.remove()
-        }, this.animationOptions.duration*2)
-    }
-
-    connectedCallback() {
-        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
-        this.animationOptions = {
-            duration: 300,
-            fill: "forwards",
-            easing: "ease"
-        }
-        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
-        this.notification
-        this.offset
-        this.touchStartX = 0
-        this.touchEndX = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
-        this.touchEndAnimataion;
-
-        this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close'))(
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
-
-        const observer = new MutationObserver(mutationList => {
-            mutationList.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length) {
-                        if (!mutation.addedNodes[0].classList.contains('pinned'))
-                        setTimeout(() => {
-                            this.removeNotification(mutation.addedNodes[0])
-                        }, 4000);
-                        if (window.innerWidth > 640)
-                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
-                        else
-                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
-                    }
-                    else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
-                        this.notificationPanel.style.padding = 0;
-                    }
-                }
-            })
-        })
-        observer.observe(this.notificationPanel, {
-            attributes: true,
-            childList: true,
-            subtree: true
-        })
-    }
-})
-// sm-menu
-const smMenu = document.createElement('template')
-smMenu.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .menu{
-                display: grid;
-                place-items: center;
-                position: relative;
-                height: 2rem;
-                width: 2rem;
-                outline: none;
-            }
-            .icon {
-                position: absolute;
-                fill: rgba(var(--text-color), 0.7);
-                height: 2.4rem;
-                width: 2.4rem;
-                padding: 0.7rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                border-radius: 2rem;
-                transition: background 0.3s;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .menu:focus .icon,
-            .focused{
-                background: rgba(var(--text-color), 0.1); 
-            }
-            :host([align-options="left"]) .options{
-                left: 0;
-            }
-            :host([align-options="right"]) .options{
-                right: 0;
-            }
-            .options{
-                padding: 0.5rem 0;
-                overflow: hidden auto;
-                position: absolute;
-                display: flex;
-                min-width: 100%;
-                transform: translateY(-1rem);
-                flex-direction: column;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, transform 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-                top: 100%;
-                margin: 0.4rem 0 0 0;
-                bottom: auto;
-            }
-            .moveUp{
-                top: auto;
-                margin: 0 0 0.4rem 0;
-                bottom: 100%;
-                transform: translateY(1rem);
-            }
-            .moveLeft{
-                left: auto: 
-                right: 0;
-            }
-            .no-transformations{
-                transform: none !important;
-            }
-            @media (hover: hover){
-                .menu:hover .icon{
-                    background: rgba(var(--text-color), 0.1); 
-                }
-            }
-        </style>
-        <div class="select">
-            <div class="menu" tabindex="0">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <title>options</title>
-                    <circle cx="32" cy="6" r="5.5"/>
-                    <circle cx="32" cy="58" r="5.5"/>
-                    <circle cx="32" cy="31.89" r="5.5"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-menu', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenu.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    expand = () => {
-        if (!this.open) {
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-            this.optionList.classList.remove('hide')
-            this.optionList.classList.add('no-transformations')
-            this.open = true
-            this.icon.classList.add('focused')
-        }
-    }
-    collapse = () => {
-        if (this.open) {
-            this.open = false
-            this.icon.classList.remove('focused')
-            this.optionList.classList.add('hide')
-            this.optionList.classList.remove('no-transformations')
-        }
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.containerDimensions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            menu = this.shadowRoot.querySelector('.menu')
-        this.icon = this.shadowRoot.querySelector('.icon')
-        this.open = false;
-        menu.addEventListener('click', e => {
-            if (!this.open) {
-                this.expand()
-            } else {
-                this.collapse()
-            }
-        })
-        menu.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                if (!this.open) {
-                    this.expand()
-                } else {
-                    this.collapse()
-                }
-            }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.optionList.addEventListener('click', e => {
-            this.collapse()
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            this.containerDimensions = this.optionList.getBoundingClientRect()
-            this.menuDimensions = menu.getBoundingClientRect()
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-        });
-        window.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && e.button !== 2) {
-                this.collapse()
-            }
-        })
-        if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
-            this.parentNode.setAttribute('oncontextmenu', 'return false')
-            this.parentNode.addEventListener('mouseup', e => {
-                if (e.button === 2) {
-                    this.expand()
-                }
-            })
-        }
-        const intersectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (!entry.isIntersecting && this.open) {
-                    if(window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height)
-                        this.optionList.classList.add('moveUp')
-                    else
-                        this.optionList.classList.remove('moveUp')
-                    if (entry.intersectionRect.left > this.containerDimensions.width) {
-                        this.optionList.style.right = 0
-                    }
-                    else {
-                        this.optionList.style.right = 'auto'
-                    }
-                }
-            })
-        }, {
-                threshold: 1
-        })
-        intersectionObserver.observe(this.optionList)
-    }
-})
-
-// option
-const smMenuOption = document.createElement('template')
-smMenuOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.6rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                white-space: nowrap;
-                outline: none;
-                display: flex;
-                align-items: center;
-                text-transform: capitalize;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-menu-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenuOption.content.cloneNode(true))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.click()
-            }
-        })
-        this.setAttribute('tabindex', '0')
-    }
-})
\ No newline at end of file
diff --git a/Layouts/many sections layout/js/components.min.js b/Layouts/many sections layout/js/components.min.js
new file mode 100644
index 0000000..3ad756a
--- /dev/null
+++ b/Layouts/many sections layout/js/components.min.js	
@@ -0,0 +1,7 @@
+const smButton=document.createElement("template");smButton.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    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</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(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
+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 smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\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    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --font-size: 1rem;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    opacity: .7;\n    font-weight: 400;\n    font-size: var(--font-size);\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: var(--font-size);\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 1rem;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',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._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.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)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}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 isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <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>\n                        ${this._errorText}\n                        `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
+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 smPopup=document.createElement("template");smPopup.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: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    -webkit-transform: scale(1) translateY(100%);\n            transform: scale(1) translateY(100%);\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n    content-visibility: auto;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding);\n    overflow-y: auto;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    visiblity: none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.4rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-transform: scale(1) translateY(3rem);\n                transform: scale(1) translateY(3rem);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\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}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',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.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),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.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.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
+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);
\ No newline at end of file
diff --git a/Layouts/many sections layout/js/helper.js b/Layouts/many sections layout/js/helper.js
deleted file mode 100644
index a7c51ee..0000000
--- a/Layouts/many sections layout/js/helper.js	
+++ /dev/null
@@ -1,133 +0,0 @@
-if (!navigator.onLine)
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-window.addEventListener('offline', () => {
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-})
-window.addEventListener('online', () => {
-    notify('We are back online.', '', '', true)
-})
-let themeToggler = document.getElementById("theme_toggle")
-if (localStorage.theme === "dark") {
-    darkTheme()
-    themeToggler.checked = true;
-} else {
-    lightTheme()
-    themeToggler.checked = false;
-}
-
-function lightTheme() {
-    document.body.setAttribute("data-theme", "light");
-}
-
-function darkTheme() {
-    document.body.setAttribute("data-theme", "dark");
-}
-themeToggler.addEventListener("change", () => {
-    if (themeToggler.checked) {
-        darkTheme()
-        localStorage.setItem("theme", "dark");
-    } else {
-        lightTheme()
-        localStorage.setItem("theme", "light");
-    }
-})
-
-// function required for popups or modals to appear
-class Stack {
-    constructor() {
-        this.items = [];
-    }
-    push(element) {
-        this.items.push(element);
-    }
-    pop() {
-        if (this.items.length == 0)
-            return "Underflow";
-        return this.items.pop();
-    }
-    peek(index) {
-        let newIndex = index ? index : 1
-        return this.items[this.items.length - index];
-    }
-}
-let popupStack = new Stack(),
-    zIndex = 10;
-function showPopup(popup, permission) {
-    let thisPopup = document.getElementById(popup);
-    document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    popupStack.push({ thisPopup, permission })
-    thisPopup.show(permission, popupStack)
-    zIndex++;
-    thisPopup.setAttribute('style', `z-index: ${zIndex}`)
-    return thisPopup;
-}
-function setAttributes(el, attrs) {
-    for (var key in attrs) {
-        el.setAttribute(key, attrs[key]);
-    }
-}
-// displays a popup for asking permission. Use this instead of JS confirm
-let confirmation = function (message) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('confirmation');
-        showPopup('confirmation')
-        popup.querySelector('#confirm_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(true);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(false);
-        }
-    })
-}
-
-// displays a popup for asking user input. Use this instead of JS prompt
-let askPrompt = function (message, defaultVal) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('prompt'),
-            input = popup.querySelector('input');
-        if (defaultVal)
-            input.value = defaultVal;
-        showPopup('prompt')
-        input.focus()
-        input.addEventListener('keyup', e => {
-            if (e.key === 'Enter') {
-                resolve(input.value);
-                hidePopup()
-            }
-        })
-        popup.querySelector('#prompt_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(input.value);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(null);
-        }
-    })
-}
-
-function formatedTime(time) {
-    let timeFrag = new Date(parseInt(time)).toString().split(' '),
-        day = timeFrag[0],
-        month = timeFrag[1],
-        date = timeFrag[2],
-        year = timeFrag[3],
-        hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
-        finalTime = '';
-    parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
-    return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
-}
-
-function copyToClipboard(parent) {
-    let toast = document.getElementById('textCopied'),
-        textToCopy = parent.querySelector('.copy').textContent;
-    navigator.clipboard.writeText(textToCopy)
-    toast.classList.remove('hide');
-    setTimeout(() => {
-        toast.classList.add('hide');
-    }, 2000)
-}
\ No newline at end of file
diff --git a/Layouts/many sections layout/js/main_UI.js b/Layouts/many sections layout/js/main_UI.js
new file mode 100644
index 0000000..b4d9afd
--- /dev/null
+++ b/Layouts/many sections layout/js/main_UI.js	
@@ -0,0 +1,282 @@
+// Global variables
+const domRefs = {};
+const appPages = ['home']
+
+
+//Checks for internet connection status
+if (!navigator.onLine)
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { sound: true }
+    );
+window.addEventListener("offline", () => {
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { pinned: true, sound: true }
+    );
+});
+window.addEventListener("online", () => {
+    getRef("notification_drawer").clearAll();
+    notify("We are back online.", "success");
+});
+
+// Use instead of document.getElementById
+function getRef(elementId) {
+    if (!domRefs.hasOwnProperty(elementId)) {
+        domRefs[elementId] = {
+            count: 1,
+            ref: null,
+        };
+        return document.getElementById(elementId);
+    } else {
+        if (domRefs[elementId].count < 3) {
+            domRefs[elementId].count = domRefs[elementId].count + 1;
+            return document.getElementById(elementId);
+        } else {
+            if (!domRefs[elementId].ref)
+                domRefs[elementId].ref = document.getElementById(elementId);
+            return domRefs[elementId].ref;
+        }
+    }
+}
+
+// returns dom with specified element
+function createElement(tagName, obj) {
+    const { className, textContent, innerHTML, attributes = {} } = obj
+    const elem = document.createElement(tagName)
+    for (let attribute in attributes) {
+        elem.setAttribute(attribute, attributes[attribute])
+    }
+    if (className)
+        elem.className = className
+    if (textContent)
+        elem.textContent = textContent
+    if (innerHTML)
+        elem.innerHTML = innerHTML
+    return elem
+}
+
+// Use when a function needs to be executed after user finishes changes
+const debounce = (callback, wait) => {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}
+
+// Limits the rate of function execution
+let timerId;
+function throttle(func, delay) {
+    // If setTimeout is already scheduled, no need to do anything
+    if (timerId) {
+        return;
+    }
+
+    // Schedule a setTimeout after delay seconds
+    timerId = setTimeout(function () {
+        func();
+
+        // Once setTimeout function execution is finished, timerId = undefined so that in
+        // the next scroll event function execution can be scheduled by the setTimeout
+        timerId = undefined;
+    }, delay);
+}
+
+// function required for popups or modals to appear
+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];
+    }
+}
+let popupStack = new Stack(),
+    zIndex = 10;
+
+async function showPopup(popup, pinned) {
+    zIndex++
+    getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
+    popupStack = getRef(popup).show({ pinned, popupStack })
+    return getRef(popup);
+}
+
+// hides the popup or modal 
+function hidePopup() {
+    if (popupStack.peek() === undefined)
+        return;
+    popupStack.peek().popup.hide()
+}
+
+// displays a popup for asking permission. Use this instead of JS confirm
+let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+    return new Promise(resolve => {
+        showPopup('confirmation_popup', true)
+        getRef('confirm_title').textContent = title;
+        getRef('confirm_message').textContent = message;
+        let cancelButton = getRef('confirmation_popup').children[2].children[0],
+            submitButton = getRef('confirmation_popup').children[2].children[1]
+        submitButton.textContent = confirmText
+        cancelButton.textContent = cancelText
+        submitButton.onclick = () => {
+            hidePopup()
+            resolve(true);
+        }
+        cancelButton.onclick = () => {
+            hidePopup()
+            resolve(false);
+        }
+    })
+}
+
+// displays a popup for asking user input. Use this instead of JS prompt
+async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") {
+    showPopup('prompt_popup', true)
+    getRef('prompt_title').textContent = title;
+    let input = getRef('prompt_input');
+    input.setAttribute("placeholder", message)
+    let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
+    if (showText)
+        input.setAttribute("type", "text")
+    else
+        input.setAttribute("type", "password")
+    input.focusIn()
+    buttons[0].textContent = falseBtn;
+    buttons[1].textContent = trueBtn;
+    return new Promise((resolve, reject) => {
+        buttons[0].onclick = () => {
+            hidePopup()
+            return;
+        }
+        buttons[1].onclick = () => {
+            let value = input.value;
+            hidePopup()
+            resolve(value)
+        }
+    })
+}
+
+//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+function notify(message, mode, options = {}) {
+    const { pinned = false, sound } = options
+    if (mode === "error") console.error(message);
+    let icon
+    switch (mode) {
+        case 'success':
+            icon = `<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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+            break;
+        case 'error':
+            icon = `<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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+            break;
+    }
+    getRef("notification_drawer").push(message, { pinned, icon });
+    if (navigator.onLine && sound) {
+        getRef("notification_sound").currentTime = 0;
+        getRef("notification_sound").play();
+    }
+}
+
+const currentYear = new Date().getFullYear();
+function getFormatedTime(time, relative) {
+    try {
+        if (String(time).indexOf("_")) time = String(time).split("_")[0];
+        const intTime = parseInt(time);
+        if (String(intTime).length < 13) time *= 1000;
+        let timeFrag = new Date(intTime).toString().split(" "),
+            day = timeFrag[0],
+            month = timeFrag[1],
+            date = timeFrag[2],
+            year = timeFrag[3],
+            minutes = new Date(intTime).getMinutes(),
+            hours = new Date(intTime).getHours(),
+            currentTime = new Date().toString().split(" ");
+
+        minutes = minutes < 10 ? `0${minutes}` : minutes;
+        let finalHours = ``;
+        if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
+        else if (hours === 0) finalHours = `12:${minutes}`;
+        else finalHours = `${hours}:${minutes}`;
+
+        finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
+        if (relative) {
+            return `${date} ${month} ${year}`;
+        } else return `${finalHours} ${month} ${date} ${year}`;
+    } catch (e) {
+        console.error(e);
+        return time;
+    }
+}
+
+window.addEventListener('hashchange', e => showPage(window.location.hash))
+window.addEventListener("load", () => {
+    document.body.classList.remove('hide-completely')
+    showPage(window.location.hash)
+    // document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
+    document.addEventListener('keyup', (e) => {
+        if (e.code === 'Escape') {
+            hidePopup()
+        }
+    })
+    document.addEventListener("pointerdown", (e) => {
+        if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+            createRipple(e, e.target.closest("button, sm-button, .interact"));
+        }
+    });
+    document.addEventListener('copy', () => {
+        notify('copied', 'success')
+    })
+});
+
+function createRipple(event, target) {
+    const circle = document.createElement("span");
+    const diameter = Math.max(target.clientWidth, target.clientHeight);
+    const radius = diameter / 2;
+    const targetDimensions = target.getBoundingClientRect();
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+    circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+    circle.classList.add("ripple");
+    const rippleAnimation = circle.animate(
+        [
+            {
+                transform: "scale(3)",
+                opacity: 0,
+            },
+        ],
+        {
+            duration: 1000,
+            fill: "forwards",
+            easing: "ease-out",
+        }
+    );
+    target.append(circle);
+    rippleAnimation.onfinish = () => {
+        circle.remove();
+    };
+}
+
+function showPage(targetPage) {
+    let pageId
+    if (targetPage === '') {
+        pageId = 'overview_page'
+    }
+    else {
+        pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
+    }
+    if(!appPages.includes(pageId)) return
+    document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
+    getRef(pageId).classList.remove('hide-completely')
+}
\ No newline at end of file
diff --git a/Layouts/sidebar layout/css/main.css b/Layouts/sidebar layout/css/main.css
index 97dd133..139aad2 100644
--- a/Layouts/sidebar layout/css/main.css	
+++ b/Layouts/sidebar layout/css/main.css	
@@ -1,61 +1,88 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'Roboto', sans-serif;
+  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 {
-  --accent-color: #303F9F;
-  --text-color: 17, 17, 17;
-  --foreground-color: 255, 255, 255;
-  background: rgba(var(--foreground-color), 1);
   color: rgba(var(--text-color), 1);
-  font-size: 16px;
+  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"] {
-  --accent-color: #4a5cd3;
-  --foreground-color: 20, 20, 20;
-  --text-color: 238, 238, 238;
-}
-
-h1, h2, h3, h4, h5 {
-  font-family: 'Poppins', sans-serif;
-  text-transform: capitalize;
-}
-
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.8rem;
+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 {
-  margin: 1.5rem 0;
+  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 {
+  object-fit: cover;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-button {
+  --border-radius: 0.3rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
 
 .hide {
   opacity: 0;
@@ -67,110 +94,264 @@ p {
 }
 
 .no-transformations {
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }
 
-.icon {
-  height: 1.2rem;
-  width: 1.2rem;
-  fill: none;
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-#navbar {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  -webkit-box-shadow: 0.2rem 0 0.5rem rgba(0, 0, 0, 0.1);
-          box-shadow: 0.2rem 0 0.5rem rgba(0, 0, 0, 0.1);
-  z-index: 3;
-  padding: 1rem 0;
-  background: rgba(var(--foreground-color), 1);
-  border-right: solid 1px rgba(var(--text-color), 0.16);
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+.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;
 }
 
-#navbar .navbar-item {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  padding: 0.6rem 1.5rem;
-  padding-right: 3rem;
-  border-radius: 0.4em;
-  color: rgba(var(--text-color), 0.8);
-  font-size: 0.9em;
+.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: 0.8rem;
+}
+
+.uppercase {
   text-transform: uppercase;
-  width: 100%;
-  -webkit-tap-highlight-color: transparent;
 }
 
-#navbar .navbar-item .icon {
-  margin-right: 1rem;
-}
-
-#navbar .navbar-item h4 {
+.capitalize {
   text-transform: capitalize;
-  font-weight: 600;
 }
 
-#navbar .active {
-  color: var(--accent-color);
+.flex {
+  display: flex;
 }
 
-#navbar .active .icon {
-  stroke: var(--accent-color);
-}
-
-#logo {
-  display: -ms-grid;
+.grid {
   display: grid;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.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%;
-  -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
-  gap: 0.6rem 0.6rem;
-  margin-right: 1rem;
-  padding: 0.6rem 2rem;
-  margin-bottom: 1rem;
 }
 
-#logo h4 {
-  text-transform: capitalize;
-  font-size: 1.2rem;
-  font-weight: 600;
+.color-0-8 {
+  color: rgba(var(--text-color), 0.8);
 }
 
-#logo h5 {
-  font-family: 'Roboto', sans-serif;
+.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: transparent;
+}
+
+.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: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+#confirmation_popup,
+#prompt_popup {
+  flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+  font-weight: 500;
+  margin-bottom: 0.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: 0.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%;
+}
+
+#main_header {
+  padding: 0.5rem 1.5rem;
+  border-bottom: 1px solid rgba(var(--text-color), 0.1);
+}
+
+#side_nav_button {
+  padding: 0.5rem;
+  margin-left: -0.5rem;
+}
+
+#logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 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;
@@ -178,172 +359,118 @@ p {
   stroke: none;
 }
 
-.toggle {
-  margin-top: auto;
-  position: relative;
-  cursor: pointer;
-  padding: 0;
-}
-
-.toggle input[type='checkbox'] {
-  display: none;
-}
-
-.toggle .switch {
-  overflow: hidden;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  justify-items: center;
-  padding: 0.2rem;
-  min-height: 1.6rem;
-  max-height: 1.6rem;
-  border-radius: 0.5rem;
-  position: relative;
-  margin: 0;
-  margin-right: 1rem;
-}
-
-.toggle .circle {
-  border-radius: 0.5rem;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
-  fill: rgba(var(--text-color), 0.8);
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  height: 1.2rem;
-  width: 1.2rem;
-}
-
-.toggle .circle:first-of-type {
-  margin-bottom: 0.4rem;
-}
-
-.toggle .circle line {
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-}
-
-.toggle input:checked ~ .switch .circle {
-  -webkit-transform: translateY(-1.7rem);
-          transform: translateY(-1.7rem);
-}
-
-.page {
-  padding: 2rem 1.5rem;
+.right {
   max-height: 100%;
   overflow-y: auto;
 }
 
-.options-tab {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+#side_nav > :last-child {
+  padding-bottom: 3rem;
 }
-
-.options-tab .option {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  border-radius: 0.4rem;
-  padding: 1.5rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  width: 9rem;
-  border: solid 1px rgba(var(--text-color), 0.2);
-  text-transform: capitalize;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.options-tab .option .icon {
-  background: rgba(var(--text-color), 0.1);
-  height: 2.8rem;
-  width: 2.8rem;
-  padding: 0.8rem;
-  border-radius: 2rem;
-  margin-bottom: 1rem;
-  stroke: rgba(var(--text-color), 0.4);
-}
-
-.options-tab .option h4 {
-  font-weight: 400;
+#side_nav h4 {
   font-size: 0.9rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 1.5rem;
 }
 
-#home_page h1 {
-  font-weight: 600;
+.right {
+  padding: 1.5rem;
+}
+.right h1 {
+  margin-bottom: 1.5rem;
 }
 
-#home_page p {
-  margin-bottom: 3rem;
+.page {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 3rem;
 }
 
-#home_page h2 {
-  margin-bottom: 1rem;
+.list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.8rem;
+}
+
+.list__item {
+  display: flex;
+  padding: 0.8rem 1.5rem;
+  text-transform: capitalize;
+}
+.list__item--active {
+  color: var(--accent-color);
+  background: rgba(var(--text-color), 0.06);
 }
 
 @media screen and (max-width: 640px) {
-  #main_header {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    padding: 1.5rem;
-  }
-  #main_header .icon {
-    stroke-width: 12;
-    height: 3rem;
-    width: 3rem;
-    background: rgba(var(--foreground-color), 1);
-    border-radius: 2rem;
-    padding: 1rem;
-    -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
-            box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+  main {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
   }
 }
+@media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 32rem;
+  }
 
-@media only screen and (min-width: 640px) {
-  main {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: auto 1fr;
-        grid-template-columns: auto 1fr;
-    gap: 2rem;
-    height: 100vh;
-    overflow-y: auto;
-  }
-  p {
-    max-width: 40rem;
-  }
-  #navbar {
-    position: relative;
-    -webkit-transform: none;
-            transform: none;
-    height: 100%;
-  }
   #main_header {
+    padding: 1rem 1.5rem;
+    grid-area: main-header;
+  }
+
+  #side_nav_button {
     display: none;
   }
-}
 
-@media (hover: hover) {
-  .navbar-item:hover {
-    background: rgba(var(--text-color), 0.1);
+  main {
+    grid-template-columns: 14rem minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "main-header main-header" ". .";
+  }
+
+  .right {
+    display: grid;
+    grid-template-columns: 1fr 90% 1fr;
+  }
+  .right > * {
+    grid-column: 2/3;
+  }
+
+  .page__title {
+    font-size: 2.5rem;
+  }
+
+  #overview_page {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: 1fr auto;
+  }
+  #overview_page > div:first-of-type {
+    grid-column: 2/3;
+    text-align: right;
+  }
+  #overview_page > div:nth-of-type(2) {
+    grid-row: 1/2;
   }
 }
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+@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;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.5);
+  }
+
+  .list__item:hover {
+    background: rgba(var(--text-color), 0.1);
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/Layouts/sidebar layout/css/main.min.css b/Layouts/sidebar layout/css/main.min.css
new file mode 100644
index 0000000..6fb53cf
--- /dev/null
+++ b/Layouts/sidebar layout/css/main.min.css	
@@ -0,0 +1 @@
+.hide,.ripple{pointer-events:none}.list,ul{list-style:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{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),.8)}p:not(:last-of-type){margin-bottom:1rem}img{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:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{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;-ms-hyphens:auto;-moz-hyphens:auto;-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}#logo h4,.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}#logo h4,.capitalize,h2{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}#confirmation_popup,#prompt_popup,.page{flex-direction:column}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.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),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#logo,main{display:grid}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#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}main{height:100%}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#logo{align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}.list,.list__item,.page{display:flex}#logo h4{font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.page{padding-bottom:3rem}.list{flex-direction:column;margin-bottom:.8rem}.list__item{padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){sm-popup{--width:32rem}#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
diff --git a/Layouts/sidebar layout/css/main.scss b/Layouts/sidebar layout/css/main.scss
index 83dc1d2..7951a50 100644
--- a/Layouts/sidebar layout/css/main.scss	
+++ b/Layouts/sidebar layout/css/main.scss	
@@ -1,49 +1,79 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
 *{
-    box-sizing: border-box;
     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{
-    --accent-color: #303F9F;
-    --text-color: 17, 17, 17;
-    --foreground-color: 255, 255, 255;
-    background: rgba(var(--foreground-color), 1);
+body {
+    &,
+    *{
+        --accent-color: #0D7377;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+        --danger-color: red;
+    }
     color: rgba(var(--text-color), 1);
-    font-size: 16px;
+    background: rgba(var(--background-color), 1);
 }
-body[data-theme="dark"]{
-    --accent-color: #4a5cd3;
-    --foreground-color: 20, 20, 20;
-    --text-color: 238, 238, 238;
+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);
+    }
 }
-h1, h2, h3, h4, h5{
-    font-family: 'Poppins', sans-serif;
-    text-transform: capitalize;
-}
-h1{
-    font-size: 3rem;
-}
-h2{
-    font-size: 2rem;
-}
-h3{
-    font-size: 1.5rem;
-}
-h4{
-    font-size: 1rem;
-}
-h5{
-    font-size: 0.8rem;
-}
-p{
-    margin: 1.5rem 0;
+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;
+    }
+}
+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;
+    }
+}
+
+button{
+    display: inline-flex;
+    border: none;
+    background-color: inherit;
+}
+
+a:any-link:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-button{
+    --border-radius: 0.3rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
 }
 .hide{
     opacity: 0;
@@ -55,77 +85,209 @@ p{
 .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;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -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: 0.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: 0.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: transparent;
+}
+.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;
-    fill: none;
-    stroke: rgba(var(--text-color), 0.8);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+    &--left{
+        margin-right: 0.5rem;
+    }
+    &--right{
+        margin-left: 0.5rem;
+    }
 }
-#navbar{
-    display: flex;
+#confirmation_popup,
+#prompt_popup {
     flex-direction: column;
-    align-items: center;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    box-shadow: 0.2rem 0 0.5rem rgba(0, 0, 0, 0.1);
-    z-index: 3;
-    padding: 1rem 0;
-    background: rgba(var(--foreground-color), 1);
-    border-right: solid 1px rgba(var(--text-color), 0.16);
-    transform: translateX(-100%);
-    transition: transform 0.3s;
-    .navbar-item{
-        display: flex;
-        position: relative;
-        text-align: center;
-        cursor: pointer;
-        padding: 0.6rem 1.5rem;
-        padding-right: 3rem;
-        border-radius: 0.4em;
-        color: rgba(var(--text-color), 0.8);
-        font-size: 0.9em;
-        text-transform: uppercase;
-        width: 100%;
-        -webkit-tap-highlight-color: transparent;
-        .icon{
-            margin-right: 1rem;
-        }
-        h4{
-            text-transform: capitalize;
-            font-weight: 600;
-        }
-    }
-    .active{
-        color: var(--accent-color);
-        .icon{
-            stroke: var(--accent-color);
+    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;
+}
+h2{
+  margin: 3rem 0 1rem 0;
+  text-transform: capitalize;
+}
+main{
+    display: grid;
+    height: 100%;
+}
+#main_header{
+    padding: 0.5rem 1.5rem;
+    border-bottom: 1px solid rgba(var(--text-color), .1);
+}
+#side_nav_button{
+    padding: 0.5rem;
+    margin-left: -0.5rem;
+}
 #logo{
     display: grid;
     align-items: center;
     width: 100%;
     grid-template-columns: auto 1fr;
-    gap: 0.6rem 0.6rem;
+    gap: 0 0.5rem;
     margin-right: 1rem;
-    padding: 0.6rem 2rem;
-    margin-bottom: 1rem;
     h4{
         text-transform: capitalize;
-        font-size: 1.2rem;
+        font-size: 1rem;
         font-weight: 600;
     }
-    h5{
-        font-family: 'Roboto', sans-serif;
-        font-weight: 400;
-    }
     #main_logo{
         height: 1.4rem;
         width: 1.4rem;
@@ -133,135 +295,107 @@ p{
         stroke: none;
     }
 }
-.toggle{
-    margin-top: auto;
-    position: relative;
-    cursor: pointer;
-    padding: 0;
-    input[type='checkbox']{
-        display: none;
-    }
-    .switch{
-        overflow: hidden;
-        display: inline-flex;
-        flex-direction: column;
-        justify-items: center;
-        padding: 0.2rem;
-        min-height: 1.6rem;
-        max-height: 1.6rem;
-        border-radius: 0.5rem;
-        position: relative;
-        margin: 0;
-        margin-right: 1rem;
-    }
-    .circle{
-        border-radius: 0.5rem;
-        transition: transform 0.3s;
-        &:first-of-type{
-            margin-bottom: 0.4rem;
-        }
-        fill: rgba(var(--text-color), 0.8);
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        height: 1.2rem;
-        width: 1.2rem;
-        line{
-            stroke: rgba(var(--text-color), 0.8);
-            stroke-width: 6;
-        }
-    }
-    input:checked ~ .switch .circle{
-        transform: translateY(-1.7rem);
-    }
-}
-.page{
-    padding: 2rem 1.5rem;
+.right{
     max-height: 100%;
     overflow-y: auto;
 }
-.options-tab{
-    display: flex;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-    .option{
-        display: inline-flex;
-        flex-direction: column;
-        border-radius: 0.4rem;
+#side_nav{
+    & > :last-child{
+        padding-bottom: 3rem;
+    }
+    h4{
+        font-size: 0.9rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
         padding: 1.5rem;
-        margin-right: 1rem;
-        margin-bottom: 1rem;
-        width: 9rem;
-        border: solid 1px rgba(var(--text-color), 0.2);
-        text-transform: capitalize;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        .icon{
-            background: rgba(var(--text-color), 0.1);
-            height: 2.8rem;
-            width: 2.8rem;
-            padding: 0.8rem;
-            border-radius: 2rem;
-            margin-bottom: 1rem;
-            stroke: rgba(var(--text-color), 0.4);
-        }
-        h4{
-            font-weight: 400;
-            font-size: 0.9rem;
-        }
     }
 }
-#home_page{
+.right{
+    padding: 1.5rem;
     h1{
-        font-weight: 600;
+        margin-bottom: 1.5rem;
     }
-    p{
-        margin-bottom: 3rem;
-    }
-    h2{
-        margin-bottom: 1rem;
+}
+.page{
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 3rem;
+}    
+.list{
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.8rem;
+}
+.list__item{
+    display: flex;
+    padding: 0.8rem 1.5rem;
+    text-transform: capitalize;
+    &--active{
+        color: var(--accent-color);
+        background: rgba(var(--text-color), .06);
     }
 }
 @media screen and (max-width: 640px){
+    main{
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr;
+    }
+}
+@media screen and (min-width: 640px){
+    sm-popup{
+        --width: 32rem;
+    }
     #main_header{
-        position: sticky;
-        top: 0;
-        padding: 1.5rem;
-        .icon{
-            stroke-width: 12;
-            height: 3rem;
-            width: 3rem;
-            background: rgba(var(--foreground-color), 1);
-            border-radius: 2rem;
-            padding: 1rem;
-            box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16),
-                0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+        padding: 1rem 1.5rem;
+        grid-area: main-header;
+    }
+    #side_nav_button{
+        display: none;
+    }
+    main{
+        grid-template-columns: 14rem minmax(0, 1fr);
+        grid-template-rows: auto 1fr;
+        grid-template-areas: 'main-header main-header' '. .';
+    }   
+    .right{
+        display: grid;
+        grid-template-columns: 1fr 90% 1fr;
+        & > * {
+            grid-column: 2/3;
+        }
+    }
+    .page__title{
+        font-size: 2.5rem;
+    }
+    #overview_page{
+        display: grid;
+        gap: 1.5rem;
+        grid-template-columns: 1fr auto;
+        & > div:first-of-type{
+            grid-column: 2/3;
+            text-align: right;
+        }
+        & > div:nth-of-type(2){
+            grid-row: 1/2;
         }
     }
 }
-@media only screen and (min-width: 640px){
-    main{
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: 2rem;
-        height: 100vh;
-        overflow-y: auto;
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
     }
-    p{
-        max-width: 40rem;
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
     }
-    #navbar{
-        position: relative;
-        transform: none;
-        height: 100%;
-    }
-    #main_header{
-        display: none;
-    }
-}
-@media (hover: hover){
-    .navbar-item:hover{
-        background: rgba(var(--text-color), 0.1);
+    .list__item:hover{
+        background: rgba(var(--text-color), .1);
+        cursor: pointer;
     }
 }
\ No newline at end of file
diff --git a/Layouts/sidebar layout/index.html b/Layouts/sidebar layout/index.html
index 3e0df48..27ca152 100644
--- a/Layouts/sidebar layout/index.html	
+++ b/Layouts/sidebar layout/index.html	
@@ -6,149 +6,83 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <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">
 </head>
 
-<body data-theme="light">
+<body data-theme="light" class="hide-completely">
+    <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>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn">OK</button>
+        </div>
+    </sm-popup>
+    <sm-popup id="prompt_popup">
+        <h4 id="prompt_title"></h4>
+        <p id="prompt_message"></p>
+        <sm-input id="prompt_input"></sm-input>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
+        </div>
+    </sm-popup>
     <main>
-        <nav id="navbar">
+        <header id="main_header" class="flex align-center space-between">
+            <button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()"
+                aria-label="Hamburger menu toggle button">
+                <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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z" />
+                </svg>
+            </button>
             <div id="logo">
                 <svg id="main_logo" viewBox="0 0 27.25 32">
                     <title>RanchiMall</title>
                     <path
                         d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
                 </svg>
-                <span>
-                    <h5>RanchiMall</h5>
-                    <h4>App Name</h4>
-                </span>
+                <h4>App name</h4>
             </div>
-            <div class="navbar-item active" onclick="showPage(this, 'home_page')">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <path
-                        d="M24.77,44.15H40.06V63.5H53.4V36h5.66a3.38,3.38,0,0,0,2.53-5.68l-6.73-7.16V11.26H46.48v3L34.53,1.59a3.49,3.49,0,0,0-5.06,0L2.41,30.35A3.38,3.38,0,0,0,4.94,36H10.6V63.5H24.77" />
-                </svg>
-                <h4>Home</h4>
-            </div>
-            <div class="navbar-item" onclick="showPage(this, 'profile_page')">
-                <svg class="icon" viewBox="0 0 49.54 61.12">
-                    <path
-                        d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14"
-                        transform="translate(-25.23 -20)" />
-                    <path
-                        d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06"
-                        transform="translate(-25.23 -19.44)" />
-                </svg>
-                <h4>User</h4>
-            </div>
-            <label class="toggle navbar-item" title="Change theme">
-                <input type="checkbox" name="theme toggle" id="theme_toggle">
-                <div class="switch">
-                    <svg class="circle" viewBox="0 0 64 64">
-                        <title>dark theme</title>
-                        <path
-                            d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
-                            transform="translate(0 0)" />
-                    </svg>
-                    <svg class="circle" viewBox="0 0 64 64">
-                        <title>light theme</title>
-                        <circle cx="32" cy="32" r="13.9" />
-                        <line x1="32" y1="6.86" x2="32" />
-                        <line x1="32" y1="64" x2="32" y2="57.14" />
-                        <line x1="57.14" y1="32" x2="64" y2="32" />
-                        <line y1="32" x2="6.86" y2="32" />
-                        <line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
-                        <line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
-                        <line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
-                        <line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
-                    </svg>
-                </div>
-                <h4>Toggle theme</h4>
-            </label>
-        </nav>
-        <header id="main_header">
-            <svg id="sidebar_btn" class="icon" viewBox="0 0 64 64">
-                <title>menu</title>
-                <line y1="12" x2="64" y2="12" />
-                <line y1="52" x2="42" y2="52" />
-            </svg>
+            <theme-toggle></theme-toggle>
         </header>
-        <section class="page" id="home_page">
-            <h1>Heading</h1>
-            <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi excepturi eius voluptate quod quasi
-                dolore, quisquam, voluptatem repellendus sapiente consectetur similique ducimus dicta magni harum,
-            </p>
-            <h3>Options</h3>
+        <hamburger-menu id="side_nav">
+            <ul class="list">
+                <li>
+                    <a href="#dashboard" class="list__item list__item--active interact">
+                        dashboard
+                    </a>
+                </li>
+                <li>
+                    <a href="#settings" class="list__item interact">
+                        Settings
+                    </a>
+                </li>
+            </ul>
+        </hamburger-menu>
+        <article class="right language-html">
+            <section id="dashboard" class="page">
+                <h1 class="page__title">Dashboard</h1>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, sint. Aperiam ipsum expedita tenetur quasi, repellat ea. Laboriosam, earum ratione!</p>
+            </section>
 
-            <div class="options-tab">
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-                <div class="option">
-                    <svg class="icon" viewBox="0 0 64 64">
-                        <title>transfer</title>
-                        <polyline
-                            points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
-                    </svg>
-                    <h4>Option</h4>
-                </div>
-            </div>
-        </section>
-        <section id="profile_page" class="page hide-completely">
-            <h2>User Settings</h2>
-        </section>
+            <section id="settings" class="page hide-completely">
+                <h1 class="page__title">Settings</h1>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nihil distinctio dolore molestias ullam architecto ipsam qui possimus aliquam. Odio.</p>
+            </section>
+        </article>
     </main>
-    <script id="helper_functions" src="js/helper.js"></script>
-    <script src="js/components.js"></script>
-    <script id="UI_functions">
-        let allPages = document.querySelectorAll('.page'),
-            allTabs = document.querySelectorAll('.navbar-item');
-        function showPage(btn, page) {
-            allPages.forEach((page) => {
-                page.classList.add('hide-completely')
-            })
-            allTabs.forEach((tab) => {
-                tab.classList.remove('active')
-            })
-            document.getElementById(page).classList.remove('hide-completely')
-            btn.classList.add('active')
-        }
-        let sidebarBtn = document.getElementById('sidebar_btn'),
-            sidebar = document.getElementById('navbar'),
-            sidebarExpanded = false;
-        sidebarBtn.addEventListener('click', e => {
-            sidebar.classList.add('no-transformations')
-            sidebarExpanded = true
-        })
-        addEventListener('click', e => {
-            if(sidebarExpanded)
-            if(!e.target.closest('#navbar') && !e.target.closest('#sidebar_btn')){
-                sidebar.classList.remove('no-transformations')
-                sidebarExpanded = false;
-            }
-        })
-    </script>
+    <script src="js/main_UI.js"></script>
+    <script src="js/components.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Layouts/sidebar layout/js/components.js b/Layouts/sidebar layout/js/components.js
deleted file mode 100644
index 30d8c2f..0000000
--- a/Layouts/sidebar layout/js/components.js	
+++ /dev/null
@@ -1,2918 +0,0 @@
-//Button
-
-const smButton = document.createElement('template')
-smButton.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }       
-            :host{
-                display: inline-flex;
-            }
-            :host([disabled='true']) .button{
-                cursor: default;
-                opacity: 1;
-                background: rgba(var(--text-color), 0.4) !important;
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='primary']) .button{
-                background: var(--accent-color);
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='outlined']) .button{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            :host([variant='no-outline']) .button{
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            .button {
-                display: flex;
-                padding: 0.6rem 0.9rem;
-                cursor: pointer;
-                user-select: none;
-                border-radius: 0.2rem; 
-                justify-content: center;
-                transition: box-shadow 0.3s;
-                text-transform: uppercase;
-                font-weight: 500;
-                color: rgba(var(--text-color), 0.9);
-                letter-spacing: 0.1rem;
-                font-family: var(--font-family);
-                font-size: 0.9rem;
-                background: rgba(var(--text-color), 0.1); 
-                -webkit-tap-highlight-color: transparent;
-                outline: none;
-            }
-            :host(:not([disabled="true"])) .button:focus{
-                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:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-            }
-            @media (hover: hover){
-                :host(:not([disabled="true"])) .button:active{
-                    box-shadow: none !important;
-                }
-                :host([variant='outlined']) .button:active{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset !important;
-                }
-                :host(:not([disabled="true"])) .button:hover{
-                    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:hover{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                }
-            }
-            @media (hover: none){
-                :host(:not([disabled="true"])) .button:active{
-                    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{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)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 class="button" tabindex="0" role="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.getAttribute('disabled')
-        }
-
-        set disabled(val) {
-            this.setAttribute('disabled', val)
-        }
-
-        dispatch = () => {
-            if (this.getAttribute('disabled') === 'true') {
-                this.dispatchEvent(new CustomEvent('disabled', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-            else {
-                this.dispatchEvent(new CustomEvent('clicked', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-        }
-
-        connectedCallback() {
-            this.addEventListener('click', (e) => {
-                this.dispatch()
-            })
-            this.addEventListener('keyup', (e) => {
-                if (e.code === "Enter" || e.code === "Space")
-                    this.dispatch()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-        }
-    })
-
-//Input
-const smInput = document.createElement('template')
-smInput.innerHTML = `
-        <style>
-        *{
-            padding: 0;
-            margin: 0;
-            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:invalid{
-            outline: none;
-            box-shadow: none;
-        }
-        ::-moz-focus-inner{
-        border: none;
-        }
-        :host{
-            display: inline-flex;
-        }
-        .hide{
-           opacity: 0 !important;
-           pointer-events: none !important;
-        }
-        .icon {
-            fill: none;
-            height: 1.6rem;
-            width: 1.6rem;
-            padding: 0.5rem;
-            stroke: rgba(var(--text-color), 0.7);
-            stroke-width: 10;
-            overflow: visible;
-            stroke-linecap: round;
-            border-radius: 1rem;
-            stroke-linejoin: round;
-            cursor: pointer;
-            min-width: 0;
-        }
-        .input {
-            display: flex;
-            align-items: center;
-            position: relative;
-            gap: 1rem;
-            padding: 0.6rem 1rem;
-            border-radius: 0.2em;
-            transition: opacity 0.3s;
-            background: rgba(var(--text-color), 0.1);
-            font-family: var(--font-family);
-            width: 100%
-            outline: none;
-        }
-
-        input:focus{
-            caret-color: var(--accent-color);
-        }
-        .input:focus-within{
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-        }
-    
-        .label {
-            user-select: none;
-            opacity: .7;
-            font-weight: 400;
-            font-size: 1rem;
-            position: absolute;
-            top: 0;
-            transition: transform 0.3s;
-            -webkit-transform-origin: left;
-            transform-origin: left;
-            pointer-events: none;
-            will-change: transform;
-            text-transform: capitalize;
-        }
-        .container{
-            display: flex;
-            position: relative;
-            align-items: center;
-            flex: 1;
-        }    
-        input{
-            font-size: 1rem;
-            border: none;
-            background: transparent;
-            outline: none;
-            color: rgba(var(--text-color), 1);
-            width: 100%;
-        }
-        .animate-label .container input {
-            -webkit-transform: translateY(0.5rem);
-                    transform: translateY(0.5rem);
-            }
-          
-        .animate-label .container .label {
-            -webkit-transform: translateY(-60%) scale(0.7);
-                    transform: translateY(-60%) scale(0.7);
-            opacity: 1;
-            color: var(--accent-color)
-        }
-        .helper-text{
-            color: var(--error-color);
-            padding: 0.4rem 1rem;
-        }
-        @media (any-hover: hover){
-            .icon:hover{
-                background: rgba(var(--text-color), 0.1);
-            }
-        }
-    </style>
-    <label class="input">
-        <slot name = "icon"></slot>
-        <div class="container">
-            <input/>
-            <div class="label"></div>
-        </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
-    </label>
-    <div class="helper-text hide"></div>
-`;
-customElements.define('sm-input',
-    class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true))
-        }
-        static get observedAttributes() {
-            return ['placeholder']
-        }
-
-        get value() {
-            return this.shadowRoot.querySelector('input').value
-        }
-
-        set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
-        }
-
-        get placeholder() {
-            return this.getAttribute('placeholder')
-        }
-
-        set placeholder(val) {
-            this.setAttribute('placeholder', val)
-        }
-
-        get type() {
-            return this.getAttribute('type')
-        }
-
-        get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
-        }
-
-        preventNonNumericalInput = (e) => {
-            let keyCode = e.keyCode;
-            if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) {
-                e.preventDefault();
-            }
-        }
-
-        checkInput = () => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
-                return;
-            if (this.input.value !== '') {
-                if (this.animate)
-                    this.inputParent.classList.add('animate-label')
-                else
-                    this.label.classList.add('hide')
-                this.clearBtn.classList.remove('hide')
-            }
-            else {
-                if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
-                else
-                    this.label.classList.remove('hide')
-                this.clearBtn.classList.add('hide')
-            }
-            if (this.valueChanged) {
-                if (this.input.checkValidity()) {
-                    this.helperText.classList.add('hide')
-                    this.inputParent.style.boxShadow = ``
-                }
-                else {
-                    this.helperText.classList.remove('hide')
-                    this.inputParent.style.boxShadow = `0 0 0 0.1rem ${this.computedStyle.getPropertyValue('--error-color')}`
-                }
-            }
-        }
-
-        connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.computedStyle = window.getComputedStyle(this.inputParent)
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.helperText = this.shadowRoot.querySelector('.helper-text')
-            this.valueChanged = false;
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
-            if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('helper-text')) {
-                this.helperText.textContent = this.getAttribute('helper-text')
-            }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                }
-                else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            }
-            else
-                this.input.setAttribute('type', 'text')
-            this.input.addEventListener('keydown', e => {
-                if (this.getAttribute('type') === 'number')
-                    this.preventNonNumericalInput(e);
-            })
-            this.input.addEventListener('input', e => {
-                this.checkInput()
-            })
-            this.input.addEventListener('change', e => {
-                this.valueChanged = true;
-                if (this.input.checkValidity())
-                    this.helperText.classList.add('hide')
-                else
-                    this.helperText.classList.remove('hide')
-            })
-            this.clearBtn.addEventListener('click', e => {
-                this.input.value = ''
-                this.checkInput()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'placeholder')
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
-            }
-        }
-    })
-
-// tab-header
-
-const smTabs = document.createElement('template')
-smTabs.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: flex;
-}
-.tabs{
-    position: relative;
-    display: grid;
-    grid-template-rows: auto 1fr;
-}
-.panel-container{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    overflow: hidden auto;
-}
-.tab-header{
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: flex-start;
-    gap: 1rem;
-    position: relative;
-    overflow: auto hidden;
-    max-width: 100%;
-    scrollbar-width: 0;
-    margin-bottom: 1rem;
-}
-.indicator{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 0.15rem;
-    border-radius: 1rem 1rem 0 0;  
-    background: var(--accent-color);
-    transition: transform 0.3s, width 0.3s;
-}
-:host([variant="tab"]) .indicator{
-    height: 100%;
-    border-radius: 0.2rem
-}
-:host([variant="tab"]) .tab-header{
-    border-bottom: none; 
-}
-.hide-completely{
-    display: none;
-}
-:host([variant="tab"]) slot[name="tab"]::slotted(.active){
-    color: rgba(var(--foreground-color), 1);
-}
-
-slot[name="tab"]::slotted(.active){
-    color: var(--accent-color);
-    opacity: 1;
-}
-slot[name="panel"]::slotted(.hide-completely){
-    display: none;
-}
-@media (hover: none){
-    .tab-header::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    .tab-header::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-}         
-</style>
-<div class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot name="tab">Nothing to see here</slot>
-        <div class="indicator"></div>
-    </div>
-    <div part="panel-container" class="panel-container">
-        <slot name="panel">Nothing to see here</slot>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tabs', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true))
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
-        this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-    }
-    connectedCallback() {
-
-        //animations
-        let flyInLeft = [
-            {
-                opacity: 0,
-                transform: 'translateX(-1rem)'
-            },
-            {
-                opacity: 1,
-                transform: 'none'
-            }
-        ],
-            flyInRight = [
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyOutLeft = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                }
-            ],
-            flyOutRight = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                }
-            ],
-            animationOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-        this.prevTab
-        this.allTabs
-
-        this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => {
-            this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => {
-                panel.classList.add('hide-completely')
-            })
-        })
-        this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => {
-            this.allTabs = this.shadowRoot.querySelector('slot[name="tab"]').assignedElements();
-            this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => {
-                panel.setAttribute('rank', index + 1)
-            })
-        })
-        this._targetBodyFlyRight = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInRight, animationOptions)
-        }
-        this._targetBodyFlyLeft = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInLeft, animationOptions)
-        }
-        this.tabSlot.addEventListener('click', e => {
-            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
-                return
-            if (this.prevTab)
-                this.prevTab.classList.remove('active')
-            e.target.classList.add('active')
-
-            e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
-            this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-
-            if (this.prevTab) {
-                let targetBody = e.target.nextElementSibling,
-                    currentBody = this.prevTab.nextElementSibling;
-
-                if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyRight(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyRight(targetBody)
-                        }
-                    }
-                } else {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyLeft(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyLeft(targetBody)
-                        }
-                    }
-                }
-            } else {
-                e.target.nextElementSibling.classList.remove('hide-completely')
-            }
-            this.prevTab = e.target;
-        })
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => { 
-                if (this.prevTab) {
-                    let tabDimensions = this.prevTab.getBoundingClientRect();
-                    this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    let activeElement = this.tabSlot.assignedElements().filter(element => {
-                        if (element.classList.contains('active'))
-                            return true
-                    })
-                    if (activeElement.length) {
-                        let tabDimensions = activeElement[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                    }
-                    else {
-                        this.tabSlot.assignedElements()[0].classList.add('active')
-                        this.panelSlot.assignedElements()[0].classList.remove('hide-completely')
-                        let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                    }
-                }
-            })
-        },
-            { threshold: 1.0 })
-        observer.observe(this)
-        if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick') == 'true') {
-            let touchStartTime = 0,
-                touchEndTime = 0,
-                swipeTimeThreshold = 200,
-                swipeDistanceThreshold = 20,
-                startingPointX = 0,
-                endingPointX = 0,
-                currentIndex = 0;
-            this.addEventListener('touchstart', e => {
-                touchStartTime = e.timeStamp
-                startingPointX = e.changedTouches[0].clientX
-            })
-            this.panelSlot.addEventListener('touchend', e => {
-                touchEndTime = e.timeStamp
-                endingPointX = e.changedTouches[0].clientX
-                if (touchEndTime - touchStartTime < swipeTimeThreshold) {
-                    currentIndex = this.allTabs.findIndex(element => element.classList.contains('active'))
-                    if (startingPointX > endingPointX && startingPointX - endingPointX > swipeDistanceThreshold && currentIndex < this.allTabs.length) {
-                        this.allTabs[currentIndex + 1].click()
-                    }
-                    else if (startingPointX < endingPointX && endingPointX - startingPointX > swipeDistanceThreshold && currentIndex > 0) {
-                        this.allTabs[currentIndex - 1].click()
-                    }
-                }
-            })
-        }
-    }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    position: relative;
-    display: inline-flex;
-    z-index: 1;
-}
-.tab{
-    position: relative;
-    user-select: none;
-    justify-content: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    white-space: nowrap;
-    padding: 0.6rem 0.8rem;
-    font-weight: 500;
-    word-spacing: 0.1em;
-    text-align: center;
-    transition: color 0.3s;
-    text-transform: capitalize;
-    font-family: var(--font-family);
-}
-@media (hover: hover){
-    :host(.active) .tab{
-        opacity: 1;
-    }
-    .tab{
-        opacity: 0.7
-    }
-    .tab:hover{
-        opacity: 1
-    }
-}
-</style>
-<div class="tab">
-    <slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true))
-    }
-})
-
-//chcekbox
-
-const smCheckbox = document.createElement('template')
-smCheckbox.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: inline-flex;
-}
-.checkbox {
-    position: relative;
-    display:flex;
-    align-items: center;
-    cursor: pointer;
-    height: 1.5rem;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-}
-
-p{
-    margin-left: 2rem;
-}
-
-.checkbox:active .icon,
-.checkbox:focus .icon{
-    background: rgba(var(--text-color), 0.2);
-}
-
-.checkbox input {
-  display: none;
-}
-
-.checkbox .checkmark {
-    stroke-dashoffset: -65;
-    stroke-dasharray: 65;
-    -webkit-transition: stroke-dashoffset 0.3s; 
-    transition: stroke-dashoffset 0.3s;
-}
-
-.checkbox input:checked ~ svg .checkmark {
-    stroke-dashoffset: 0;
-    stroke: rgba(var(--foreground-color), 1);
-}
-.checkbox input:checked ~ svg {
-    stroke: var(--accent-color);
-    fill: var(--accent-color);
-    stroke-width: 8; 
-}
-
-.icon {
-    position: absolute;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.7rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    border-radius: 2rem;
-    transition: background 0.3s;
-    left: -0.5rem;
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-</style>
-<label class="checkbox" tabindex="0">
-    <input type="checkbox">
-    <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
-        <rect class="box" x="0" y="0" width="64" height="64" rx="4" />
-        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
-    </svg>
-    <p><slot></slot></p>
-</label>`
-customElements.define('sm-checkbox', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smCheckbox.content.cloneNode(true))
-        
-        this.checkbox = this.shadowRoot.querySelector('.checkbox');
-        this.input = this.shadowRoot.querySelector('input')
-        
-        this.isChecked = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.getAttribute('checked')
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.checkbox.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.checkbox.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-
-})
-
-//audio
-
-const smAudio = document.createElement('template')
-smAudio.innerHTML = `
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-	display: flex;
-}
-
-.audio{
-  position: relative;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-align: center;
-          align-items: center;
-  -webkit-user-select: none;
-          user-select: none;
-  padding: 0.6rem;
-  border-radius: 0.2rem;
-  background: rgba(var(--text-color), 0.08);
-  overflow: hidden;
-  width: 100%;
-}
-
-.hide {
-  display: none;
-}
-
-.icon{
-  stroke: rgba(var(--text-color), 1);
-  stroke-width: 6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-  overflow: visible;
-  height: 2.1rem;
-  width: 2.1rem;
-  padding: 0.6rem;
-  cursor: pointer;
-  border-radius: 2rem;
-  margin-right: 0.5rem;
-}
-
-.icon:hover{
-  background: rgba(var(--text-color), 0.1);
-}
-
-audio {
-  display: none;
-}
-
-.track {
-  position: absolute;
-  height: 0.2rem;
-  bottom: 0;
-  background: var(--accent-color);
-  left: 0;
-  -webkit-transition: width 0.2s;
-  transition: width 0.2s;
-  pointer-events: none;
-  z-index: 0;
-  border-radius: 0.2rem;
-}
-
-.disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-</style>
-	<div class="audio">
-		<svg class="icon play" viewBox="-6 0 64 64">
-			<title>play</title>
-			<path d="M57.12,26.79,12.88,1.31a6,6,0,0,0-9,5.21v51a6,6,0,0,0,9,5.21L57.12,37.21A6,6,0,0,0,57.12,26.79Z"/>
-		</svg>
-		<svg class="icon pause hide" viewBox="0 0 64 64">
-			<title>pause</title>
-			<line x1="17.5" x2="17.5" y2="64"/>
-			<line x1="46.5" x2="46.5" y2="64"/>
-		</svg>
-		<h5 class="current-time"></h5> / <h5 class="duration"></h5>
-		<audio src=""></audio>
-		<div class="track"></div>
-	</audio>
-`;
-
-customElements.define('sm-audio', class extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' }).append(smAudio.content.cloneNode(true))
-
-        this.playing = false;
-    }
-    static get observedAttributes() {
-        return ['src']
-    }
-    play() {
-        this.audio.play()
-        this.playing = false;
-        this.pauseBtn.classList.remove('hide')
-        this.playBtn.classList.add('hide')
-    }
-    pause() {
-        this.audio.pause()
-        this.playing = true;
-        this.pauseBtn.classList.add('hide')
-        this.playBtn.classList.remove('hide')
-    }
-
-    get isPlaying() {
-        return this.playing;
-    }
-
-    connectedCallback() {
-        this.playBtn = this.shadowRoot.querySelector('.play');
-        this.pauseBtn = this.shadowRoot.querySelector('.pause');
-        this.audio = this.shadowRoot.querySelector('audio')
-        this.playBtn.addEventListener('click', e => {
-            this.play()
-        })
-        this.pauseBtn.addEventListener('click', e => {
-            this.pause()
-        })
-        this.audio.addEventListener('ended', e => {
-            this.pause()
-        })
-        let width;
-        if ('ResizeObserver' in window) {
-            let resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    width = entry.contentRect.width;
-                })
-            })
-            resizeObserver.observe(this)
-        }
-        else {
-            let observer = new IntersectionObserver((entries, observer) => {
-                if (entries[0].isIntersecting)
-                    width = this.shadowRoot.querySelector('.audio').offsetWidth;
-            }, {
-                threshold: 1
-            })
-            observer.observe(this)
-        }
-        this.audio.addEventListener('timeupdate', e => {
-            let time = this.audio.currentTime,
-                minutes = Math.floor(time / 60),
-                seconds = Math.floor(time - minutes * 60),
-                y = seconds < 10 ? "0" + seconds : seconds;
-            this.shadowRoot.querySelector('.current-time').textContent = `${minutes}:${y}`
-            this.shadowRoot.querySelector('.track').style.width = (width / this.audio.duration) * this.audio.currentTime + 'px'
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'src') {
-                if (this.hasAttribute('src') && newValue.trim() !== '') {
-                    this.shadowRoot.querySelector('audio').src = newValue;
-                    this.shadowRoot.querySelector('audio').onloadedmetadata = () => {
-                        let duration = this.audio.duration,
-                            minutes = Math.floor(duration / 60),
-                            seconds = Math.floor(duration - minutes * 60),
-                            y = seconds < 10 ? "0" + seconds : seconds;
-                        this.shadowRoot.querySelector('.duration').textContent = `${minutes}:${y}`;
-                    }
-                }
-                else
-                    this.classList.add('disabled')
-            }
-        }
-    }
-})
-
-//switch
-
-const smSwitch = document.createElement('template')
-smSwitch.innerHTML = `	
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-    display: inline-flex;
-}
-.switch {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 2.4rem;
-    padding: 0.2rem;
-    cursor: pointer;
-    outline: none;
-    border-radius: 2rem;
-    -webkit-tap-highlight-color: transparent;
-}
-
-input {
-    display: none;
-}
-
-.track {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1.4rem;
-    -webkit-transition: background 0.3s;
-    transition: background 0.3s;
-    background: rgba(var(--text-color), 0.4);
-    box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-    border-radius: 1rem;
-}
-
-.switch:active .button::after,
-.switch:focus .button::after{
-    opacity: 1
-}
-.switch:focus:not(:focus-visible){
-    opacity: 0;
-}
-.switch:focus-visible .button::after{
-    opacity: 1
-}
-
-.button::after{
-    content: '';
-    display: flex;
-    position: absolute;
-    height: 2.6rem;
-    width: 2.6rem;
-    background: rgba(var(--text-color), 0.2);
-    border-radius: 2rem;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.button {
-    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;
-    transition: transform 0.3s;
-    border: solid 0.3rem rgba(var(--foreground-color), 1);
-}
-
-input:checked ~ .button {
-    transform: translateX(100%);
-}
-
-input:checked ~ .track {
-    background: var(--accent-color);
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-</style>
-<label class="switch" tabindex="0">
-    <input type="checkbox">
-    <div class="track"></div>
-    <div class="button"></div>
-</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
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.switch.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.switch.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-})
-
-// select
-const smSelect = document.createElement('template')
-smSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .icon {
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .option-text{
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .selection{
-                border-radius: 0.2rem;
-                display: grid;
-                grid-template-columns: 1fr auto;
-                grid-template-areas: 'heading heading' '. .';
-                padding: 0.4rem 1rem;
-                background: rgba(var(--text-color), 0.06);
-                border: solid 1px rgba(var(--text-color), 0.2);
-                align-items: center;
-                outline: none;
-            }
-            .selection:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) 
-            }
-            .icon{
-                margin-left: 1rem;
-            }
-            :host([align-select="left"]) .options{
-                left: 0;
-            }
-            :host([align-select="right"]) .options{
-                right: 0;
-            }
-            .options{
-                top: 100%;
-                margin-top: 0.5rem; 
-                overflow: hidden auto;
-                position: absolute;
-                grid-area: options;
-                display: flex;
-                flex-direction: column;
-                min-width: 100%;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, top 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-            }
-            .rotate{
-                transform: rotate(180deg)
-            }
-        </style>
-        <div class="select" >
-            <div class="selection" tabindex="0">
-                <div class="option-text"></div>
-                <svg class="icon toggle" viewBox="0 0 64 64">
-                    <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-
-    collapse = () => {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
-        this.chevron.classList.remove('rotate')
-        this.open = false
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        this.chevron = this.shadowRoot.querySelector('.toggle')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            selection = this.shadowRoot.querySelector('.selection'),
-            previousOption
-        this.open = false;
-            this.slideDown = [
-                { transform: `translateY(-0.5rem)` },
-                { transform: `translateY(0)` }
-            ],
-            this.slideUp = [
-                { transform: `translateY(0)` },
-                { transform: `translateY(-0.5rem)` }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
-            }
-        selection.addEventListener('click', e => {
-            if (!this.open) {
-                this.optionList.classList.remove('hide')
-                this.optionList.animate(this.slideDown, this.animationOptions)
-                this.chevron.classList.add('rotate')
-                this.open = true
-            } else {
-                this.collapse()
-            }
-        })
-        selection.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space')
-                if (!this.open) {
-                    this.optionList.classList.remove('hide')
-                    this.optionList.animate(this.slideDown, this.animationOptions)
-                    this.chevron.classList.add('rotate')
-                    this.open = true
-                } else {
-                    this.collapse()
-                }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.addEventListener('optionSelected', e => {
-            if (previousOption !== e.target) {
-                this.setAttribute('value', e.detail.value)
-                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true
-                }))
-                if (previousOption) {
-                    previousOption.classList.remove('check-selected')
-                }
-                previousOption = e.target;
-            }
-            if(!e.detail.switching)
-                this.collapse()
-
-            e.target.classList.add('check-selected')
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                this.availableOptions.forEach((element, index) => {
-                    element.setAttribute('data-rank', index + 1);
-                    element.setAttribute('tabindex', "0");
-                })
-            }
-        });
-        document.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && this.open) {
-                this.collapse()
-            }
-        })
-    }
-})
-
-// option
-const smOption = document.createElement('template')
-smOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.2rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                display: flex;
-                align-items: center;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            :host(:focus) .option .icon{
-                opacity: 0.4
-            }
-            :host(.check-selected) .icon{
-                opacity: 1 !important
-            }
-            .icon {
-                margin-right: 0.8rem;
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                border-radius: 1rem;
-                stroke-linejoin: round;
-                opacity: 0;
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-                .option:hover .icon{
-                    opacity: 0.4
-                }
-            }
-        </style>
-        <div class="option">
-            <svg class="icon" viewBox="0 0 64 64">
-                <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-            </svg>
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true))
-    }
-
-    sendDetails = (switching) => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value'),
-                switching: switching
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        let validKey = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ]
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-            if (validKey.includes(e.code)) {
-                e.preventDefault()
-                this.sendDetails(true)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }    
-            :host{
-                display: flex;
-            }
-            .icon {
-                position: absolute;
-                display: flex;
-                fill: none;
-                height: 2.6rem;
-                width: 2.6rem;
-                padding: 0.9rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                cursor: pointer;
-                min-width: 0;
-                z-index: 1;
-                background: rgba(var(--foreground-color), 1);
-                -webkit-tap-highlight-color: transparent;
-                transition: opacity 0.3s; 
-            }
-            .hide{
-                pointer-events: none;
-                opacity: 0;
-            }
-            .select-container{
-                position: relative;
-                display: flex;
-                width: 100%;
-                align-items: center;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                gap: 0.5rem;
-                max-width: 100%;
-                overflow: auto hidden;
-            }
-            .previous-item{
-                left: 0;
-            }
-            .next-item{
-                right: 0;
-            }
-            .left,.right{
-                position: absolute;
-                width: 1rem;
-                height: 100%; 
-                transition: opacity 0.3s;
-                z-index: 1;
-            }
-            .left{
-                background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-            }
-            .right{
-                right: 0;
-                background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-            }
-            slot::slotted(.active){
-                border-radius: 2rem;
-                opacity: 1;
-                background-color: rgba(var(--text-color), .6);  
-                color: rgba(var(--foreground-color), 1);
-            }
-            @media (hover: none){
-                ::-webkit-scrollbar-track {
-                    -webkit-box-shadow: none !important;
-                    background-color: transparent !important;
-                }
-                ::-webkit-scrollbar {
-                    height: 0;
-                    background-color: transparent;
-                }
-                .icon{
-                    display: none;
-                }
-                .left,.right{
-                    display: block;
-                }
-            }
-            @media (hover: hover){
-                .select{
-                    overflow: hidden;
-                }
-                .left,.right{
-                    display: none;
-                }
-            }
-        </style>
-        <div class="select-container">
-            <div class="left hide"></div>
-            <svg class="icon previous-item hide" viewBox="4 0 64 64">
-                <title>Previous</title>
-                <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-            </svg>
-            <div class="select">
-                <slot></slot> 
-            </div>
-            <svg class="icon next-item hide" viewBox="-6 0 64 64">
-                <title>Next</title>
-                <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-            </svg>
-            <div class="right hide"></div>
-        </div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            }
-            else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                padding: 0.4rem 0.8rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                border-radius: 2rem;
-                text-transform: capitalize;
-                border: solid 1px rgba(var(--text-color), .3);
-                opacity: 0.9;
-            }
-            .option:focus{
-                background: rgba(var(--text-color), 0.1);
-            }
-
-            @media (hover: hover){
-                .option{
-                    transition: background 0.3s;
-                }
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option" tabindex="0">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
-    }
-    sendDetails = () => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-//popup
-const smPopup = document.createElement('template')
-smPopup.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: grid;
-    }
-    .popup-container{
-        display: grid;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        place-items: center;
-        background: #00000060;
-        z-index: 10;
-        transition: opacity 0.3s ease;
-    }
-    .popup{
-        flex-direction: column;
-        align-self: flex-end;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        width: 100%;
-        border-radius: 0.5rem 0.5rem 0 0;
-        position: relative;
-        display: flex;
-        transform: translateY(100%);
-        transition: transform 0.3s;
-        background: rgba(var(--foreground-color), 1);
-        box-shadow: 0 -1rem 2rem #00000020;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-    .container-header{
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-    }
-    .popup-top{
-        display: flex;
-        width: 100%;
-    }
-    .popup-body{
-        padding: 1.5rem;
-    }
-    .heading{
-        font-weight: 400;
-    }
-    .heading:first-letter{
-        text-transform: uppercase;
-    }
-    .hide{
-        opacity: 0;
-        pointer-events: none;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        padding: 0.4rem;
-        stroke: rgba(var(--text-color), 0.7);
-        stroke-width: 8;
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        -webkit-tap-highlight-color: transparent;
-    }
-    @media screen and (min-width: 640px){
-        .popup{
-            width: 24rem;
-            align-self: center;
-            border-radius: 0.4rem;
-            height: auto;
-            transform: translateY(0) scale(0.9);
-            box-shadow: 0 2rem 2rem #00000040;
-        }
-        .container-header{
-            padding: 1.2rem 1.5rem;
-        }
-    }
-    @media screen and (max-width: 640px){
-        .popup-top{
-            flex-direction: column;
-            align-items: center;
-        }
-        .handle{
-            height: 0.3rem;
-            width: 2rem;
-            background: rgba(var(--text-color), .2);
-            border-radius: 1rem;
-            margin: 0.5rem 0;
-        }
-        .heading{
-            padding: 1rem 1.5rem
-        }
-        .close{
-            height: 2rem;
-            width: 2rem;
-            padding: 0.55rem;
-            margin-right: 1rem;
-        }
-    }
-</style>
-<div class="popup-container hide" role="dialog">
-    <div class="popup">
-        <div class="popup-top">
-            <div class="handle"></div>
-            <div class="container-header">
-                <h3 class="heading"></h3>
-                <svg class="icon close" viewBox="0 0 64 64">
-                    <title>Close</title>
-                    <line x1="64" y1="0" x2="0" y2="64"/>
-                    <line x1="64" y1="64" x2="0" y2="0"/>
-                </svg>
-            </div>
-        </div>
-        <div 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))
-    }
-
-    resumeScrolling = () => {
-        const scrollY = document.body.style.top;
-        window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.setAttribute('style', `overflow: auto; top: initial`)
-        }, 300);
-    }
-
-    show(pinned, popupStack) {
-        this.pinned = pinned
-        this.popupStack = popupStack
-        this.popupContainer.classList.remove('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(0)';
-        else
-            this.popup.style.transform = 'scale(1)';
-        document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    }
-    hide() {
-        this.popupContainer.classList.add('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(100%)';
-        else
-            this.popup.style.transform = 'scale(0.9)';
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length === 0) {
-                this.resumeScrolling()
-            }
-        }
-        else {
-           this.resumeScrolling()
-        }
-    }
-
-    handleTouchStart = (e) => {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartY < e.changedTouches[0].clientY) {
-            this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(this.movePopup)
-        }
-        /*else {
-        offset = touchStartY - e.changedTouches[0].clientY;
-        this.popup.style.transform = `translateY(-${offset}px)`
-    }*/
-    }
-
-    handleTouchEnd = (e) => {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndY - this.touchStartY > this.threshold) {
-                this.hide()
-            }
-            else {
-                this.show()
-            }
-        }
-        else {
-            if (this.touchEndY > this.touchStartY)
-                this.hide()
-        }
-    }
-
-    movePopup = () => {
-        this.popup.style.transform = `translateY(${this.offset}px)`
-    }
-
-    connectedCallback() {
-        this.pinned = false
-        this.popupStack
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.offset
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-        this.touchEndAnimataion;
-        
-        if (this.hasAttribute('heading'))
-            this.shadowRoot.querySelector('.heading').textContent = this.getAttribute('heading')
-                
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                this.hide()
-            }
-        })
-
-        this.shadowRoot.querySelector('.close').addEventListener('click', e => {
-            this.hide()
-        })
-
-        this.popupHeader.addEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.addEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.addEventListener('touchend', this.handleTouchEnd)
-    }
-    disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
-    }
-})
-
-//carousel
-
-const smCarousel = document.createElement('template')
-smCarousel.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .icon {
-        position: absolute;
-        display: flex;
-        fill: none;
-        height: 2.6rem;
-        width: 2.6rem;
-        border-radius: 3rem;
-        padding: 0.9rem;
-        stroke: rgba(var(--foreground-color), 0.8);
-        stroke-width: 14;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        background: rgba(var(--text-color), 1);
-        box-shadow: 0 0.2rem 0.2rem #00000020, 
-                    0 0.5rem 1rem #00000040; 
-        -webkit-tap-highlight-color: transparent;
-        transform: scale(0)
-    }
-    .hide{
-        pointer-events: none;
-        opacity: 0;
-    }
-    .expand{
-        transform: scale(1)
-    }
-    .previous-item{
-        left: 1rem;
-    }
-    .next-item{
-        right: 1rem;
-    }
-    .left,.right{
-        position: absolute;
-        width: 2rem;
-        height: 100%; 
-        transition: opacity 0.3s;
-    }
-    .left{
-        background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .right{
-        right: 0;
-        background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .carousel-container{
-        position: relative;
-        display: flex;
-        width: 100%;
-        align-items: center;
-    }
-    .carousel{
-        display: flex;
-        max-width: 100%;
-        overflow: auto hidden;
-        scroll-snap-type: x mandatory;
-    }
-    slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="start"]) slot::slotted(*){
-        scroll-snap-align: start;
-    }
-    :host([align-items="center"]) slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="end"]) slot::slotted(*){
-        scroll-snap-align: end;
-    }
-    @media (hover: hover){
-        .carousel{
-            overflow: hidden;
-        }
-        .left,.right{
-            display: none;
-        }
-    }
-    @media (hover: none){
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        ::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-        .carousel{
-            overflow: auto none;
-        }
-        .icon{
-            display: none;
-        }
-        .left,.right{
-            display: block;
-        }
-    }
-</style>
-<div class="carousel-container">
-    <div class="left"></div>
-    <svg class="icon previous-item" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="carousel">
-        <slot></slot>
-    </div>
-    <svg class="icon next-item" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right"></div>
-</div>
-`;
-
-customElements.define('sm-carousel', class extends HTMLElement{
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
-    }
-
-    scrollLeft = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    connectedCallback() {
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.carouselItems
-        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width/3
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.previousArrow.classList.remove('expand')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.add('expand')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })        
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.nextArrow.classList.remove('expand')
-                this.nextGradient.classList.add('hide')
-            }
-            else{
-                this.nextArrow.classList.add('expand')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })     
-        
-        const carouselObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-            }
-        })
-
-        carouselObserver.observe(this.carouselContainer)
-        
-        this.carouselSlot.addEventListener('slotchange', e => {
-            this.carouselItems = this.carouselSlot.assignedElements()
-            firstElementObserver.observe(this.carouselItems[0])
-            lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
-        })
-
-        this.addEventListener('keyup', e => {
-            if (e.code === 'ArrowLeft')
-                this.scrollRight()
-            else
-                this.scrollRight()
-        })
-
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-//notifications
-
-const smNotifications = document.createElement('template')
-smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: grid;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 100;
-        max-height: 100%;
-        overflow: hidden auto;
-        overscroll-behavior: contain;
-    }
-    .inner-body{
-        padding: 1rem 1.5rem;
-    }
-    .no-transformations{
-        transform: none;
-        opacity: 1;
-    }
-    .notification{
-        opacity: 0;
-        transform: translateY(-1rem);
-        position: relative;
-        border-radius: 0.3rem;
-        box-shadow: 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-        background: rgba(var(--foreground-color), 1);
-        transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        overflow: hidden;
-        border-bottom: 1px solid rgba(var(--text-color), 0.2);
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        color: rgba(var(--text-color), 0.8);
-        overflow-wrap: break-word;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    header{
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.4rem;
-        width: 100%;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        stroke: rgba(var(--text-color), 0.7);
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-    }
-    .error-icon{
-        stroke: #E53935;
-    }
-    .success-icon{
-        stroke: #00C853;
-    }
-    .close{
-        margin-left: auto;
-        padding: 0.5rem;
-        stroke-width: 10;
-    }
-    .notification-icon{
-        height: 1.2rem;
-        width: 1.2rem;
-        margin-right: 0.6rem;
-        stroke-width: 6;
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            width: 40vw;
-        }
-        .notification{
-            margin-right: 1.5rem;
-            margin-bottom: 1rem;
-            border-bottom: none;
-            border: solid 1px rgba(var(--text-color), 0.2);
-            transform: translateX(1rem);
-        }
-    }
-    @media screen and (max-width: 640px){
-        .close{
-            display: none
-        }
-    }
-</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(true))
-    }
-
-    handleTouchStart = (e) => {
-        this.notification = e.target.closest('.notification')
-        this.touchStartX = e.changedTouches[0].clientX
-        this.notification.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartX < e.changedTouches[0].clientX) {
-            this.offset = e.changedTouches[0].clientX - this.touchStartX;
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-        else {
-            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-    }
-
-    handleTouchEnd = (e) => {
-        this.notification.style.transition = 'height 0.3s, transform 0.3s, opacity 0.3s'
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndX = e.changedTouches[0].clientX
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndX - this.touchStartX > this.threshold) {
-                this.removeNotification(this.notification)
-            }
-            else if (this.touchStartX - this.touchEndX > this.threshold) {
-                this.removeNotification(this.notification, true)
-            }
-            else {
-                this.resetPosition()
-            }
-        }
-        else {
-            if (this.touchEndX > this.touchStartX) {
-                this.removeNotification(this.notification)
-            }
-            else {
-                this.removeNotification(this.notification, true)
-            }
-        }
-    }
-
-    movePopup = () => {
-        this.notification.style.transform = `translateX(${this.offset}px)`
-    }
-
-    resetPosition = () => {
-        this.notification.style.transform = `translateX(0)`
-    }
-
-    push = (messageHeader, messageBody, options) => {
-        let notification = document.createElement('div'),
-            composition = ``,
-            { pinned, type } = options;
-        notification.classList.add('notification')
-        if (pinned)
-            notification.classList.add('pinned')
-        composition += `
-                            <div class="inner-body">
-                        <header>
-        `
-        if (type === 'error') {
-            composition += `
-            <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
-                    <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
-                    <line x1="32" y1="24" x2="32" y2="36"/>
-                    <line x1="32" y1="46" x2="32" y2="48"/>
-            </svg>`
-        }
-        else if (type === 'success') {
-            composition += `
-                <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
-                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-                </svg>
-            `
-        }
-        composition += `
-                            <h4>${messageHeader}</h4>
-                            <svg class="icon close" viewBox="0 0 64 64">
-                                <title>Close</title>
-                                <line x1="64" y1="0" x2="0" y2="64"/>
-                                <line x1="64" y1="64" x2="0" y2="0"/>
-                            </svg>
-                        </header>
-                        <p>${messageBody}</p>
-                    </div>`
-        notification.innerHTML = composition
-        this.notificationPanel.prepend(notification)
-        if (window.innerWidth > 640) {
-            notification.animate([
-                {
-                    transform: `translateX(1rem)`,
-                    opacity: '0'
-                },
-                {
-                    transform: 'translateX(0)',
-                    opacity: '1'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `transform: none;`);
-            }
-        }
-        else {
-            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
-        }
-        notification.addEventListener('touchstart', this.handleTouchStart)
-        notification.addEventListener('touchmove', this.handleTouchMove)
-        notification.addEventListener('touchend', this.handleTouchEnd)
-    }
-
-    removeNotification = (notification, toLeft) => {
-        notification.style.height = notification.scrollHeight + 'px';
-        if (!this.offset)
-            this.offset = 0;
-        
-        if (toLeft)
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(-100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        else {
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        }
-        setTimeout( () => {
-            notification.remove()
-        }, this.animationOptions.duration*2)
-    }
-
-    connectedCallback() {
-        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
-        this.animationOptions = {
-            duration: 300,
-            fill: "forwards",
-            easing: "ease"
-        }
-        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
-        this.notification
-        this.offset
-        this.touchStartX = 0
-        this.touchEndX = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
-        this.touchEndAnimataion;
-
-        this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close'))(
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
-
-        const observer = new MutationObserver(mutationList => {
-            mutationList.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length) {
-                        if (!mutation.addedNodes[0].classList.contains('pinned'))
-                        setTimeout(() => {
-                            this.removeNotification(mutation.addedNodes[0])
-                        }, 4000);
-                        if (window.innerWidth > 640)
-                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
-                        else
-                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
-                    }
-                    else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
-                        this.notificationPanel.style.padding = 0;
-                    }
-                }
-            })
-        })
-        observer.observe(this.notificationPanel, {
-            attributes: true,
-            childList: true,
-            subtree: true
-        })
-    }
-})
-// sm-menu
-const smMenu = document.createElement('template')
-smMenu.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .menu{
-                display: grid;
-                place-items: center;
-                position: relative;
-                height: 2rem;
-                width: 2rem;
-                outline: none;
-            }
-            .icon {
-                position: absolute;
-                fill: rgba(var(--text-color), 0.7);
-                height: 2.4rem;
-                width: 2.4rem;
-                padding: 0.7rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                border-radius: 2rem;
-                transition: background 0.3s;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .menu:focus .icon,
-            .focused{
-                background: rgba(var(--text-color), 0.1); 
-            }
-            :host([align-options="left"]) .options{
-                left: 0;
-            }
-            :host([align-options="right"]) .options{
-                right: 0;
-            }
-            .options{
-                padding: 0.5rem 0;
-                overflow: hidden auto;
-                position: absolute;
-                display: flex;
-                min-width: 100%;
-                transform: translateY(-1rem);
-                flex-direction: column;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, transform 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-                top: 100%;
-                margin: 0.4rem 0 0 0;
-                bottom: auto;
-            }
-            .moveUp{
-                top: auto;
-                margin: 0 0 0.4rem 0;
-                bottom: 100%;
-                transform: translateY(1rem);
-            }
-            .moveLeft{
-                left: auto: 
-                right: 0;
-            }
-            .no-transformations{
-                transform: none !important;
-            }
-            @media (hover: hover){
-                .menu:hover .icon{
-                    background: rgba(var(--text-color), 0.1); 
-                }
-            }
-        </style>
-        <div class="select">
-            <div class="menu" tabindex="0">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <title>options</title>
-                    <circle cx="32" cy="6" r="5.5"/>
-                    <circle cx="32" cy="58" r="5.5"/>
-                    <circle cx="32" cy="31.89" r="5.5"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-menu', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenu.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    expand = () => {
-        if (!this.open) {
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-            this.optionList.classList.remove('hide')
-            this.optionList.classList.add('no-transformations')
-            this.open = true
-            this.icon.classList.add('focused')
-        }
-    }
-    collapse = () => {
-        if (this.open) {
-            this.open = false
-            this.icon.classList.remove('focused')
-            this.optionList.classList.add('hide')
-            this.optionList.classList.remove('no-transformations')
-        }
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.containerDimensions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            menu = this.shadowRoot.querySelector('.menu')
-        this.icon = this.shadowRoot.querySelector('.icon')
-        this.open = false;
-        menu.addEventListener('click', e => {
-            if (!this.open) {
-                this.expand()
-            } else {
-                this.collapse()
-            }
-        })
-        menu.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                if (!this.open) {
-                    this.expand()
-                } else {
-                    this.collapse()
-                }
-            }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.optionList.addEventListener('click', e => {
-            this.collapse()
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            this.containerDimensions = this.optionList.getBoundingClientRect()
-            this.menuDimensions = menu.getBoundingClientRect()
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-        });
-        window.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && e.button !== 2) {
-                this.collapse()
-            }
-        })
-        if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
-            this.parentNode.setAttribute('oncontextmenu', 'return false')
-            this.parentNode.addEventListener('mouseup', e => {
-                if (e.button === 2) {
-                    this.expand()
-                }
-            })
-        }
-        const intersectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (!entry.isIntersecting && this.open) {
-                    if(window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height)
-                        this.optionList.classList.add('moveUp')
-                    else
-                        this.optionList.classList.remove('moveUp')
-                    if (entry.intersectionRect.left > this.containerDimensions.width) {
-                        this.optionList.style.right = 0
-                    }
-                    else {
-                        this.optionList.style.right = 'auto'
-                    }
-                }
-            })
-        }, {
-                threshold: 1
-        })
-        intersectionObserver.observe(this.optionList)
-    }
-})
-
-// option
-const smMenuOption = document.createElement('template')
-smMenuOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.6rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                white-space: nowrap;
-                outline: none;
-                display: flex;
-                align-items: center;
-                text-transform: capitalize;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-menu-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenuOption.content.cloneNode(true))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.click()
-            }
-        })
-        this.setAttribute('tabindex', '0')
-    }
-})
\ No newline at end of file
diff --git a/Layouts/sidebar layout/js/components.min.js b/Layouts/sidebar layout/js/components.min.js
new file mode 100644
index 0000000..4f0c4e7
--- /dev/null
+++ b/Layouts/sidebar layout/js/components.min.js	
@@ -0,0 +1,7 @@
+const smButton=document.createElement("template");smButton.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    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</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(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
+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 smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\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    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --font-size: 1rem;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    opacity: .7;\n    font-weight: 400;\n    font-size: var(--font-size);\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: var(--font-size);\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 1rem;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',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._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.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)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}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 isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <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>\n                        ${this._errorText}\n                        `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
+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 smPopup=document.createElement("template");smPopup.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: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    -webkit-transform: scale(1) translateY(100%);\n            transform: scale(1) translateY(100%);\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n    content-visibility: auto;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding);\n    overflow-y: auto;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    visiblity: none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.4rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-transform: scale(1) translateY(3rem);\n                transform: scale(1) translateY(3rem);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\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}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',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.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),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.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.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
+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);
\ No newline at end of file
diff --git a/Layouts/sidebar layout/js/helper.js b/Layouts/sidebar layout/js/helper.js
deleted file mode 100644
index a7c51ee..0000000
--- a/Layouts/sidebar layout/js/helper.js	
+++ /dev/null
@@ -1,133 +0,0 @@
-if (!navigator.onLine)
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-window.addEventListener('offline', () => {
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-})
-window.addEventListener('online', () => {
-    notify('We are back online.', '', '', true)
-})
-let themeToggler = document.getElementById("theme_toggle")
-if (localStorage.theme === "dark") {
-    darkTheme()
-    themeToggler.checked = true;
-} else {
-    lightTheme()
-    themeToggler.checked = false;
-}
-
-function lightTheme() {
-    document.body.setAttribute("data-theme", "light");
-}
-
-function darkTheme() {
-    document.body.setAttribute("data-theme", "dark");
-}
-themeToggler.addEventListener("change", () => {
-    if (themeToggler.checked) {
-        darkTheme()
-        localStorage.setItem("theme", "dark");
-    } else {
-        lightTheme()
-        localStorage.setItem("theme", "light");
-    }
-})
-
-// function required for popups or modals to appear
-class Stack {
-    constructor() {
-        this.items = [];
-    }
-    push(element) {
-        this.items.push(element);
-    }
-    pop() {
-        if (this.items.length == 0)
-            return "Underflow";
-        return this.items.pop();
-    }
-    peek(index) {
-        let newIndex = index ? index : 1
-        return this.items[this.items.length - index];
-    }
-}
-let popupStack = new Stack(),
-    zIndex = 10;
-function showPopup(popup, permission) {
-    let thisPopup = document.getElementById(popup);
-    document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    popupStack.push({ thisPopup, permission })
-    thisPopup.show(permission, popupStack)
-    zIndex++;
-    thisPopup.setAttribute('style', `z-index: ${zIndex}`)
-    return thisPopup;
-}
-function setAttributes(el, attrs) {
-    for (var key in attrs) {
-        el.setAttribute(key, attrs[key]);
-    }
-}
-// displays a popup for asking permission. Use this instead of JS confirm
-let confirmation = function (message) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('confirmation');
-        showPopup('confirmation')
-        popup.querySelector('#confirm_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(true);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(false);
-        }
-    })
-}
-
-// displays a popup for asking user input. Use this instead of JS prompt
-let askPrompt = function (message, defaultVal) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('prompt'),
-            input = popup.querySelector('input');
-        if (defaultVal)
-            input.value = defaultVal;
-        showPopup('prompt')
-        input.focus()
-        input.addEventListener('keyup', e => {
-            if (e.key === 'Enter') {
-                resolve(input.value);
-                hidePopup()
-            }
-        })
-        popup.querySelector('#prompt_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(input.value);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(null);
-        }
-    })
-}
-
-function formatedTime(time) {
-    let timeFrag = new Date(parseInt(time)).toString().split(' '),
-        day = timeFrag[0],
-        month = timeFrag[1],
-        date = timeFrag[2],
-        year = timeFrag[3],
-        hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
-        finalTime = '';
-    parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
-    return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
-}
-
-function copyToClipboard(parent) {
-    let toast = document.getElementById('textCopied'),
-        textToCopy = parent.querySelector('.copy').textContent;
-    navigator.clipboard.writeText(textToCopy)
-    toast.classList.remove('hide');
-    setTimeout(() => {
-        toast.classList.add('hide');
-    }, 2000)
-}
\ No newline at end of file
diff --git a/Layouts/sidebar layout/js/main_UI.js b/Layouts/sidebar layout/js/main_UI.js
new file mode 100644
index 0000000..96f39cd
--- /dev/null
+++ b/Layouts/sidebar layout/js/main_UI.js	
@@ -0,0 +1,309 @@
+// Global variables
+const domRefs = {};
+const appPages = ['dashboard', 'settings']
+
+
+//Checks for internet connection status
+if (!navigator.onLine)
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { sound: true }
+    );
+window.addEventListener("offline", () => {
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { pinned: true, sound: true }
+    );
+});
+window.addEventListener("online", () => {
+    getRef("notification_drawer").clearAll();
+    notify("We are back online.", "success");
+});
+
+// Use instead of document.getElementById
+function getRef(elementId) {
+    if (!domRefs.hasOwnProperty(elementId)) {
+        domRefs[elementId] = {
+            count: 1,
+            ref: null,
+        };
+        return document.getElementById(elementId);
+    } else {
+        if (domRefs[elementId].count < 3) {
+            domRefs[elementId].count = domRefs[elementId].count + 1;
+            return document.getElementById(elementId);
+        } else {
+            if (!domRefs[elementId].ref)
+                domRefs[elementId].ref = document.getElementById(elementId);
+            return domRefs[elementId].ref;
+        }
+    }
+}
+
+// returns dom with specified element
+function createElement(tagName, obj) {
+    const { className, textContent, innerHTML, attributes = {} } = obj
+    const elem = document.createElement(tagName)
+    for (let attribute in attributes) {
+        elem.setAttribute(attribute, attributes[attribute])
+    }
+    if (className)
+        elem.className = className
+    if (textContent)
+        elem.textContent = textContent
+    if (innerHTML)
+        elem.innerHTML = innerHTML
+    return elem
+}
+
+// Use when a function needs to be executed after user finishes changes
+const debounce = (callback, wait) => {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}
+
+// Limits the rate of function execution
+let timerId;
+function throttle(func, delay) {
+    // If setTimeout is already scheduled, no need to do anything
+    if (timerId) {
+        return;
+    }
+
+    // Schedule a setTimeout after delay seconds
+    timerId = setTimeout(function () {
+        func();
+
+        // Once setTimeout function execution is finished, timerId = undefined so that in
+        // the next scroll event function execution can be scheduled by the setTimeout
+        timerId = undefined;
+    }, delay);
+}
+
+// function required for popups or modals to appear
+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];
+    }
+}
+let popupStack = new Stack(),
+    zIndex = 10;
+
+async function showPopup(popup, pinned) {
+    zIndex++
+    getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
+    popupStack = getRef(popup).show({ pinned, popupStack })
+    return getRef(popup);
+}
+
+// hides the popup or modal 
+function hidePopup() {
+    if (popupStack.peek() === undefined)
+        return;
+    popupStack.peek().popup.hide()
+}
+
+// displays a popup for asking permission. Use this instead of JS confirm
+let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+    return new Promise(resolve => {
+        showPopup('confirmation_popup', true)
+        getRef('confirm_title').textContent = title;
+        getRef('confirm_message').textContent = message;
+        let cancelButton = getRef('confirmation_popup').children[2].children[0],
+            submitButton = getRef('confirmation_popup').children[2].children[1]
+        submitButton.textContent = confirmText
+        cancelButton.textContent = cancelText
+        submitButton.onclick = () => {
+            hidePopup()
+            resolve(true);
+        }
+        cancelButton.onclick = () => {
+            hidePopup()
+            resolve(false);
+        }
+    })
+}
+
+// displays a popup for asking user input. Use this instead of JS prompt
+async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") {
+    showPopup('prompt_popup', true)
+    getRef('prompt_title').textContent = title;
+    let input = getRef('prompt_input');
+    input.setAttribute("placeholder", message)
+    let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
+    if (showText)
+        input.setAttribute("type", "text")
+    else
+        input.setAttribute("type", "password")
+    input.focusIn()
+    buttons[0].textContent = falseBtn;
+    buttons[1].textContent = trueBtn;
+    return new Promise((resolve, reject) => {
+        buttons[0].onclick = () => {
+            hidePopup()
+            return;
+        }
+        buttons[1].onclick = () => {
+            let value = input.value;
+            hidePopup()
+            resolve(value)
+        }
+    })
+}
+
+//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+function notify(message, mode, options = {}) {
+    const { pinned = false, sound } = options
+    if (mode === "error") console.error(message);
+    let icon
+    switch (mode) {
+        case 'success':
+            icon = `<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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+            break;
+        case 'error':
+            icon = `<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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+            break;
+    }
+    getRef("notification_drawer").push(message, { pinned, icon });
+    if (navigator.onLine && sound) {
+        getRef("notification_sound").currentTime = 0;
+        getRef("notification_sound").play();
+    }
+}
+
+const currentYear = new Date().getFullYear();
+function getFormatedTime(time, relative) {
+    try {
+        if (String(time).indexOf("_")) time = String(time).split("_")[0];
+        const intTime = parseInt(time);
+        if (String(intTime).length < 13) time *= 1000;
+        let timeFrag = new Date(intTime).toString().split(" "),
+            day = timeFrag[0],
+            month = timeFrag[1],
+            date = timeFrag[2],
+            year = timeFrag[3],
+            minutes = new Date(intTime).getMinutes(),
+            hours = new Date(intTime).getHours(),
+            currentTime = new Date().toString().split(" ");
+
+        minutes = minutes < 10 ? `0${minutes}` : minutes;
+        let finalHours = ``;
+        if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
+        else if (hours === 0) finalHours = `12:${minutes}`;
+        else finalHours = `${hours}:${minutes}`;
+
+        finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
+        if (relative) {
+            return `${date} ${month} ${year}`;
+        } else return `${finalHours} ${month} ${date} ${year}`;
+    } catch (e) {
+        console.error(e);
+        return time;
+    }
+}
+
+window.addEventListener('hashchange', e => showPage(window.location.hash))
+window.addEventListener("load", () => {
+    document.body.classList.remove('hide-completely')
+    showPage(window.location.hash)
+    // document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
+    document.addEventListener('keyup', (e) => {
+        if (e.code === 'Escape') {
+            hidePopup()
+        }
+    })
+    document.addEventListener("pointerdown", (e) => {
+        if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+            createRipple(e, e.target.closest("button, sm-button, .interact"));
+        }
+    });
+    document.addEventListener('copy', () => {
+        notify('copied', 'success')
+    })
+});
+
+function createRipple(event, target) {
+    const circle = document.createElement("span");
+    const diameter = Math.max(target.clientWidth, target.clientHeight);
+    const radius = diameter / 2;
+    const targetDimensions = target.getBoundingClientRect();
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+    circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+    circle.classList.add("ripple");
+    const rippleAnimation = circle.animate(
+        [
+            {
+                transform: "scale(3)",
+                opacity: 0,
+            },
+        ],
+        {
+            duration: 1000,
+            fill: "forwards",
+            easing: "ease-out",
+        }
+    );
+    target.append(circle);
+    rippleAnimation.onfinish = () => {
+        circle.remove();
+    };
+}
+
+function showPage(targetPage, options = {}) {
+    const { firstLoad, hashChange } = options
+    let pageId
+    if (targetPage === '') {
+        pageId = 'overview_page'
+    }
+    else {
+        pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
+    }
+    if(!appPages.includes(pageId)) return
+    document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
+    document.querySelector('.list__item--active').classList.remove('list__item--active')
+    getRef(pageId).classList.remove('hide-completely')
+    getRef(pageId).animate([
+        {
+            opacity: 0,
+            transform: 'translateX(-1rem)'
+        },
+        {
+            opacity: 1,
+            transform: 'none'
+        },
+    ],
+        {
+            duration: 300,
+            easing: 'ease'
+        })
+    const targetListItem = document.querySelector(`.list__item[href="#${pageId}"]`)
+    targetListItem.classList.add('list__item--active')
+    if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) {
+        getRef('side_nav').scrollTo({
+            top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
+            behavior: 'smooth'
+        })
+    }
+    if (hashChange && window.innerWidth < 640) {
+        getRef('side_nav').close()
+    }
+}
\ No newline at end of file
diff --git a/Layouts/tabs layout/css/main.css b/Layouts/tabs layout/css/main.css
index cfd785f..3b88c01 100644
--- a/Layouts/tabs layout/css/main.css	
+++ b/Layouts/tabs layout/css/main.css	
@@ -1,61 +1,88 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'Roboto', sans-serif;
+  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 {
-  --accent-color: #303F9F;
-  --text-color: 17, 17, 17;
-  --foreground-color: 255, 255, 255;
-  background: rgba(var(--foreground-color), 1);
   color: rgba(var(--text-color), 1);
-  font-size: 16px;
+  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"] {
-  --accent-color: #6a7dff;
-  --foreground-color: 20, 20, 20;
-  --text-color: 238, 238, 238;
-}
-
-h1, h2, h3, h4, h5 {
-  font-family: 'Poppins', sans-serif;
-  text-transform: capitalize;
-}
-
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.8rem;
+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 {
-  margin: 1.5rem 0;
+  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 {
+  object-fit: cover;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-button {
+  --border-radius: 0.3rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
 
 .hide {
   opacity: 0;
@@ -66,124 +93,258 @@ p {
   display: none !important;
 }
 
-.icon {
-  height: 1.2rem;
-  width: 1.2rem;
-  fill: none;
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.no-transformations {
+  transform: none !important;
 }
 
-.toggle {
-  position: relative;
-  cursor: pointer;
-  z-index: 1;
-  padding: 0;
-}
-
-.toggle input[type='checkbox'] {
-  display: none;
-}
-
-.toggle .switch {
-  overflow: hidden;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  justify-items: center;
-  padding: 0.2rem;
-  min-height: 1.6rem;
-  max-height: 1.6rem;
-  border-radius: 0.5rem;
-  position: relative;
-  margin: 0;
-}
-
-.toggle .circle {
-  border-radius: 0.5rem;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
-  fill: rgba(var(--text-color), 0.8);
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  height: 1.2rem;
-  width: 1.2rem;
-}
-
-.toggle .circle:first-of-type {
-  margin-bottom: 0.4rem;
-}
-
-.toggle .circle line {
-  stroke: rgba(var(--text-color), 0.8);
-  stroke-width: 6;
-}
-
-.toggle input:checked ~ .switch .circle {
-  -webkit-transform: translateY(-1.7rem);
-          transform: translateY(-1.7rem);
-}
-
-sm-tabs {
-  margin-bottom: 2rem;
-}
-
-sm-tabs::part(tab-header) {
-  border-bottom: solid 1px rgba(var(--text-color), 0.2);
-  padding: 0 1.5rem;
-  margin-bottom: 2rem;
-}
-
-sm-tabs::part(panel-container) {
-  padding: 0 1.5rem;
-}
-
-#navbar {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 1.5rem 2rem;
-  background: rgba(var(--foreground-color), 1);
-  z-index: 3;
-}
-
-#logo {
-  display: -ms-grid;
-  display: grid;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.overflow-ellipsis {
   width: 100%;
-  -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
-  gap: 0.6rem 0.6rem;
-  margin-right: 1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-#logo h4 {
+.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;
+}
+
+.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: 0.8rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
   text-transform: capitalize;
-  font-size: 1.2rem;
-  font-weight: 600;
 }
 
-#logo h5 {
-  font-family: 'Roboto', sans-serif;
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.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: transparent;
+}
+
+.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: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+#confirmation_popup,
+#prompt_popup {
+  flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+  font-weight: 500;
+  margin-bottom: 0.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: 0.6rem;
+  margin-left: auto;
+}
+
+#main_header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  position: sticky;
+  padding: 1rem 1.5rem;
+  background: rgba(var(--background-color), 1);
+  border-bottom: solid 1px rgba(var(--text-color), 0.16);
+  z-index: 2;
+}
+
+#logo {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.5rem;
+  margin-right: 1rem;
+}
+#logo h4 {
+  text-transform: capitalize;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 0.2rem;
+}
+#logo h5 {
+  font-size: 0.8rem;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+}
 #logo #main_logo {
   height: 1.4rem;
   width: 1.4rem;
@@ -191,43 +352,46 @@ sm-tabs::part(panel-container) {
   stroke: none;
 }
 
+sm-tab-header {
+  padding: 0 1.5rem;
+  background-color: rgba(var(--text-color), 0.06);
+}
+
+sm-tab {
+  padding: 0.5rem 0.8rem;
+}
+
 .section {
+  display: flex;
+  flex-direction: column;
   margin-top: 3rem;
+  padding: 0 1.5rem;
 }
-
-.section h3 + p {
-  margin-top: 1rem;
-}
-
 .section:first-of-type {
   margin-top: 0;
 }
 
-.card {
-  padding: 1.5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
+.section__header {
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 20rem;
-  border-radius: 0.5rem;
-  margin-right: 1.5rem;
-  border: solid 1px rgba(var(--text-color), 0.2);
+  padding: 1rem 0;
+  justify-content: space-between;
 }
 
+.card {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  min-width: 20rem;
+  border-radius: 0.5rem;
+  margin-right: 1.5rem;
+  background-color: rgba(var(--text-color), 0.06);
+}
 .card h3 {
   font-weight: 500;
 }
 
-@media only screen and (min-width: 640px) {
-  sm-tabs::part(tab-header), sm-tabs::part(panel-container) {
-    padding: 0 4vw;
+@media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 24rem;
   }
-  p {
-    max-width: 40rem;
-  }
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Layouts/tabs layout/css/main.min.css b/Layouts/tabs layout/css/main.min.css
new file mode 100644
index 0000000..4553462
--- /dev/null
+++ b/Layouts/tabs layout/css/main.min.css	
@@ -0,0 +1 @@
+#logo h5,*{font-family:Roboto,sans-serif}*{padding:0;margin:0;box-sizing:border-box}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{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),.8)}p:not(:last-of-type){margin-bottom:1rem}img{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:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}ul{list-style:none}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}#main_header,.flex{display:flex}.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;-ms-hyphens:auto;-moz-hyphens:auto;-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}#logo h4,.capitalize{text-transform:capitalize}.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}#main_header,.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),.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),.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.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),.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}#main_header{gap:1rem;position:sticky;padding:1rem 1.5rem;background:rgba(var(--background-color),1);border-bottom:solid 1px rgba(var(--text-color),.16);z-index:2}#logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}#logo h4{font-size:1rem;font-weight:600;margin-top:.2rem}#logo h5{font-size:.8rem;font-weight:400}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color),1);stroke:none}sm-tab-header{padding:0 1.5rem;background-color:rgba(var(--text-color),.06)}sm-tab{padding:.5rem .8rem}.section{display:flex;flex-direction:column;margin-top:3rem;padding:0 1.5rem}.section:first-of-type{margin-top:0}.section__header{display:flex;padding:1rem 0;justify-content:space-between}.card{padding:1.5rem;display:flex;flex-direction:column;min-width:20rem;border-radius:.5rem;margin-right:1.5rem;background-color:rgba(var(--text-color),.06)}.card h3{font-weight:500}@media screen and (min-width:640px){sm-popup{--width:24rem}}
\ No newline at end of file
diff --git a/Layouts/tabs layout/css/main.scss b/Layouts/tabs layout/css/main.scss
index 04a64ea..29733c0 100644
--- a/Layouts/tabs layout/css/main.scss	
+++ b/Layouts/tabs layout/css/main.scss	
@@ -1,49 +1,79 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
 *{
-    box-sizing: border-box;
     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{
-    --accent-color: #303F9F;
-    --text-color: 17, 17, 17;
-    --foreground-color: 255, 255, 255;
-    background: rgba(var(--foreground-color), 1);
+body {
+    &,
+    *{
+        --accent-color: #0D7377;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+        --danger-color: red;
+    }
     color: rgba(var(--text-color), 1);
-    font-size: 16px;
+    background: rgba(var(--background-color), 1);
 }
-body[data-theme="dark"]{
-    --accent-color: #6a7dff;
-    --foreground-color: 20, 20, 20;
-    --text-color: 238, 238, 238;
+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);
+    }
 }
-h1, h2, h3, h4, h5{
-    font-family: 'Poppins', sans-serif;
-    text-transform: capitalize;
-}
-h1{
-    font-size: 3rem;
-}
-h2{
-    font-size: 2rem;
-}
-h3{
-    font-size: 1.5rem;
-}
-h4{
-    font-size: 1rem;
-}
-h5{
-    font-size: 0.8rem;
-}
-p{
-    margin: 1.5rem 0;
+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;
+    }
+}
+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;
+    }
+}
+
+button{
+    display: inline-flex;
+    border: none;
+    background-color: inherit;
+}
+
+a:any-link:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-button{
+    --border-radius: 0.3rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
 }
 .hide{
     opacity: 0;
@@ -52,88 +82,206 @@ p{
 .hide-completely{
     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;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -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: 0.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: 0.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: transparent;
+}
+.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;
-    fill: none;
-    stroke: rgba(var(--text-color), 0.8);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-.toggle{
-    position: relative;
-    cursor: pointer;
-    z-index: 1;
-    padding: 0;
-    input[type='checkbox']{
-        display: none;
+    &--left{
+        margin-right: 0.5rem;
     }
-    .switch{
-        overflow: hidden;
-        display: inline-flex;
-        flex-direction: column;
-        justify-items: center;
-        padding: 0.2rem;
-        min-height: 1.6rem;
-        max-height: 1.6rem;
-        border-radius: 0.5rem;
-        position: relative;
+    &--right{
+        margin-left: 0.5rem;
+    }
+}
+#confirmation_popup,
+#prompt_popup {
+    flex-direction: column;
+    h4 {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+    }
+    sm-button{
         margin: 0;
     }
-    .circle{
-        border-radius: 0.5rem;
-        transition: transform 0.3s;
-        &:first-of-type{
-            margin-bottom: 0.4rem;
-        }
-        fill: rgba(var(--text-color), 0.8);
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        height: 1.2rem;
-        width: 1.2rem;
-        line{
-            stroke: rgba(var(--text-color), 0.8);
-            stroke-width: 6;
+    .flex {
+        padding: 0;
+        margin-top: 1rem;
+        sm-button:first-of-type {
+            margin-right: 0.6rem;
+            margin-left: auto;
         }
     }
-    input:checked ~ .switch .circle{
-        transform: translateY(-1.7rem);
-    }
 }
-sm-tabs{
-    margin-bottom: 2rem;
-    &::part(tab-header){
-        border-bottom: solid 1px rgba(var(--text-color), 0.2);
-        padding: 0 1.5rem;
-        margin-bottom: 2rem;
-    } 
-    &::part(panel-container){
-        padding: 0 1.5rem;
-    } 
-}
-#navbar{
+#main_header{
     display: flex;
+    gap: 1rem;
     align-items: center;
-    padding: 1.5rem 2rem;
-    background: rgba(var(--foreground-color), 1);
-    z-index: 3;
+    position: sticky;
+    padding: 1rem 1.5rem;
+    background: rgba(var(--background-color), 1);
+    border-bottom: solid 1px rgba(var(--text-color), 0.16);
+    z-index: 2;
 }
 #logo{
     display: grid;
     align-items: center;
     width: 100%;
     grid-template-columns: auto 1fr;
-    gap: 0.6rem 0.6rem;
+    gap: 0 0.5rem;
     margin-right: 1rem;
     h4{
         text-transform: capitalize;
-        font-size: 1.2rem;
+        font-size: 1rem;
         font-weight: 600;
+        margin-top: 0.2rem;
     }
     h5{
+        font-size: 0.8rem;
         font-family: 'Roboto', sans-serif;
         font-weight: 400;
     }
@@ -144,35 +292,43 @@ sm-tabs{
         stroke: none;
     }
 }
+sm-tab-header{
+    padding: 0 1.5rem;
+    background-color: rgba(var(--text-color), 0.06);
+}
+sm-tab{
+    padding: 0.5rem 0.8rem;
+}
 .section{
+    display: flex;
+    flex-direction: column;
     margin-top: 3rem;
-    h3 + p{
-        margin-top: 1rem;
-    }
+    padding: 0 1.5rem;
     &:first-of-type{
         margin-top: 0;
     }
 }
+.section__header{
+    display: flex;
+    padding: 1rem 0;
+    justify-content: space-between;
+}
 .card{
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
-    width: 20rem;
+    min-width: 20rem;
     border-radius: 0.5rem;
     margin-right: 1.5rem;
-    border: solid 1px rgba(var(--text-color), 0.2);
+    background-color: rgba(var(--text-color), 0.06);
     h3{
         font-weight: 500;
     }
 }
-@media only screen and (min-width: 640px){
-    sm-tabs{
-        &::part(tab-header),
-        &::part(panel-container){
-            padding: 0 4vw;
-        } 
-    }
-    p{
-        max-width: 40rem;
+
+@media screen and (min-width: 640px) {
+    // for tablet and desktop
+    sm-popup{
+        --width: 24rem;
     }
 }
\ No newline at end of file
diff --git a/Layouts/tabs layout/index.html b/Layouts/tabs layout/index.html
index 5df1fea..6b9519f 100644
--- a/Layouts/tabs layout/index.html	
+++ b/Layouts/tabs layout/index.html	
@@ -6,200 +6,143 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <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">
 </head>
 
-<body data-theme="light">
-    <nav id="navbar">
-        <div id="logo">
-            <svg id="main_logo" viewBox="0 0 27.25 32">
-                <title>RanchiMall</title>
-                <path
-                    d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
-            </svg>
-            <span>
-                <h5>RanchiMall</h5>
-                <h4>App name</h4>
-            </span>
+<body data-theme="light" class="hide-completely">
+    <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>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn">OK</button>
         </div>
-        <label class="toggle" title="Change theme">
-            <input type="checkbox" name="theme toggle" id="theme_toggle">
-            <div class="switch">
-                <svg class="circle" viewBox="0 0 64 64">
-                    <title>dark theme</title>
+    </sm-popup>
+    <sm-popup id="prompt_popup">
+        <h4 id="prompt_title"></h4>
+        <p id="prompt_message"></p>
+        <sm-input id="prompt_input"></sm-input>
+        <div class="flex align-center">
+            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+            <sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
+        </div>
+    </sm-popup>
+    <article id="home" class="page">
+        <header id="main_header" class="full-bleed">
+            <div id="logo">
+                <svg id="main_logo" viewBox="0 0 27.25 32">
+                    <title>RanchiMall</title>
                     <path
-                        d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
-                        transform="translate(0 0)" />
-                </svg>
-                <svg class="circle" viewBox="0 0 64 64">
-                    <title>light theme</title>
-                    <circle cx="32" cy="32" r="13.9" />
-                    <line x1="32" y1="6.86" x2="32" />
-                    <line x1="32" y1="64" x2="32" y2="57.14" />
-                    <line x1="57.14" y1="32" x2="64" y2="32" />
-                    <line y1="32" x2="6.86" y2="32" />
-                    <line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
-                    <line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
-                    <line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
-                    <line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
+                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
                 </svg>
+                <div class="grid">
+                    <h5>RanchiMall</h5>
+                    <h4>App name</h4>
+                </div>
             </div>
-        </label>
-    </nav>
-    <main>
-        <sm-tabs class="border-bottom">
-            <sm-tab slot="tab">Page 1</sm-tab>
-            <sm-panel slot="panel">
-                <section class="section">
-                    <h3>Heading</h3>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    </p>
-                    <sm-button variant="primary">This is a button</sm-button>
-                    <sm-carousel>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                    </sm-carousel>
-                </section>
-                <section class="section">
-                    <h3>Heading</h3>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    </p>
-                    <sm-carousel>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                    </sm-carousel>
-                </section>
-            </sm-panel>
-            <sm-tab slot="tab">Page 2</sm-tab>
-            <sm-panel slot="panel">
-                <section class="section">
-                    <h3>Heading</h3>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    </p>
-                    <sm-carousel>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                    </sm-carousel>
-                </section>
-                <section class="section">
-                    <h3>Heading</h3>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    </p>
-                    <sm-carousel>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                        <div class="card">
-                            <h3>Card</h3>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
-                            </p>
-                        </div>
-                    </sm-carousel>
-                </section>
-            </sm-panel>
-        </sm-tabs>
-    </main>
-    <script id="helper_functions" src="js/helper.js"></script>
-    <script src="js/components.js"></script>
-    <script id="UI_functions">
-        let allPages = document.querySelectorAll('.page'),
-            allTabs = document.querySelectorAll('.navbar-item');
-        function showPage(btn, page) {
-            allPages.forEach((page) => {
-                page.classList.add('hide-completely')
-            })
-            allTabs.forEach((tab) => {
-                tab.classList.remove('active')
-            })
-            document.getElementById(page).classList.remove('hide-completely')
-            btn.classList.add('active')
-        }
-    </script>
+            <sm-input placeholder="Search" type="search"></sm-input>
+            <theme-toggle></theme-toggle>
+        </header>
+        <sm-tab-header target="sections">
+            <sm-tab>Section 1</sm-tab>
+            <sm-tab>Section 2</sm-tab>
+        </sm-tab-header>
+        <sm-tab-panels id="sections">
+            <section class="section">
+                <div class="section__header">
+                    <div class="grid">
+                        <h3>Section Heading</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        </p>
+                    </div>
+                    <sm-menu align-options="right">
+                        <menu-option>first option</menu-option>
+                        <menu-option>second option</menu-option>
+                        <menu-option>third option</menu-option>
+                    </sm-menu>
+                </div>
+                <sm-carousel>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                </sm-carousel>
+            </section>
+            <section class="section">
+                <div class="section__header">
+                    <div class="grid">
+                        <h3>Section Heading</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        </p>
+                    </div>
+                    <sm-menu align-options="right">
+                        <menu-option>first option</menu-option>
+                        <menu-option>second option</menu-option>
+                        <menu-option>third option</menu-option>
+                    </sm-menu>
+                </div>
+                <sm-carousel>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                    <div class="card">
+                        <h3>Card</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
+                        </p>
+                    </div>
+                </sm-carousel>
+            </section>
+        </sm-tab-panels>
+    </article>
+    <script src="js/main_UI.js"></script>
+    <script src="js/components.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Layouts/tabs layout/js/components.js b/Layouts/tabs layout/js/components.js
deleted file mode 100644
index 30d8c2f..0000000
--- a/Layouts/tabs layout/js/components.js	
+++ /dev/null
@@ -1,2918 +0,0 @@
-//Button
-
-const smButton = document.createElement('template')
-smButton.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }       
-            :host{
-                display: inline-flex;
-            }
-            :host([disabled='true']) .button{
-                cursor: default;
-                opacity: 1;
-                background: rgba(var(--text-color), 0.4) !important;
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='primary']) .button{
-                background: var(--accent-color);
-                color: rgba(var(--foreground-color), 1);
-            }
-            :host([variant='outlined']) .button{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            :host([variant='no-outline']) .button{
-                background: rgba(var(--foreground-color), 1); 
-                color: var(--accent-color);
-            }
-            .button {
-                display: flex;
-                padding: 0.6rem 0.9rem;
-                cursor: pointer;
-                user-select: none;
-                border-radius: 0.2rem; 
-                justify-content: center;
-                transition: box-shadow 0.3s;
-                text-transform: uppercase;
-                font-weight: 500;
-                color: rgba(var(--text-color), 0.9);
-                letter-spacing: 0.1rem;
-                font-family: var(--font-family);
-                font-size: 0.9rem;
-                background: rgba(var(--text-color), 0.1); 
-                -webkit-tap-highlight-color: transparent;
-                outline: none;
-            }
-            :host(:not([disabled="true"])) .button:focus{
-                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:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-            }
-            @media (hover: hover){
-                :host(:not([disabled="true"])) .button:active{
-                    box-shadow: none !important;
-                }
-                :host([variant='outlined']) .button:active{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset !important;
-                }
-                :host(:not([disabled="true"])) .button:hover{
-                    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:hover{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                }
-            }
-            @media (hover: none){
-                :host(:not([disabled="true"])) .button:active{
-                    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{
-                    box-shadow: 0 0 0 0.1rem var(--accent-color)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 class="button" tabindex="0" role="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.getAttribute('disabled')
-        }
-
-        set disabled(val) {
-            this.setAttribute('disabled', val)
-        }
-
-        dispatch = () => {
-            if (this.getAttribute('disabled') === 'true') {
-                this.dispatchEvent(new CustomEvent('disabled', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-            else {
-                this.dispatchEvent(new CustomEvent('clicked', {
-                    bubbles: true,
-                    composed: true
-                }))
-            }
-        }
-
-        connectedCallback() {
-            this.addEventListener('click', (e) => {
-                this.dispatch()
-            })
-            this.addEventListener('keyup', (e) => {
-                if (e.code === "Enter" || e.code === "Space")
-                    this.dispatch()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-        }
-    })
-
-//Input
-const smInput = document.createElement('template')
-smInput.innerHTML = `
-        <style>
-        *{
-            padding: 0;
-            margin: 0;
-            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:invalid{
-            outline: none;
-            box-shadow: none;
-        }
-        ::-moz-focus-inner{
-        border: none;
-        }
-        :host{
-            display: inline-flex;
-        }
-        .hide{
-           opacity: 0 !important;
-           pointer-events: none !important;
-        }
-        .icon {
-            fill: none;
-            height: 1.6rem;
-            width: 1.6rem;
-            padding: 0.5rem;
-            stroke: rgba(var(--text-color), 0.7);
-            stroke-width: 10;
-            overflow: visible;
-            stroke-linecap: round;
-            border-radius: 1rem;
-            stroke-linejoin: round;
-            cursor: pointer;
-            min-width: 0;
-        }
-        .input {
-            display: flex;
-            align-items: center;
-            position: relative;
-            gap: 1rem;
-            padding: 0.6rem 1rem;
-            border-radius: 0.2em;
-            transition: opacity 0.3s;
-            background: rgba(var(--text-color), 0.1);
-            font-family: var(--font-family);
-            width: 100%
-            outline: none;
-        }
-
-        input:focus{
-            caret-color: var(--accent-color);
-        }
-        .input:focus-within{
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-        }
-    
-        .label {
-            user-select: none;
-            opacity: .7;
-            font-weight: 400;
-            font-size: 1rem;
-            position: absolute;
-            top: 0;
-            transition: transform 0.3s;
-            -webkit-transform-origin: left;
-            transform-origin: left;
-            pointer-events: none;
-            will-change: transform;
-            text-transform: capitalize;
-        }
-        .container{
-            display: flex;
-            position: relative;
-            align-items: center;
-            flex: 1;
-        }    
-        input{
-            font-size: 1rem;
-            border: none;
-            background: transparent;
-            outline: none;
-            color: rgba(var(--text-color), 1);
-            width: 100%;
-        }
-        .animate-label .container input {
-            -webkit-transform: translateY(0.5rem);
-                    transform: translateY(0.5rem);
-            }
-          
-        .animate-label .container .label {
-            -webkit-transform: translateY(-60%) scale(0.7);
-                    transform: translateY(-60%) scale(0.7);
-            opacity: 1;
-            color: var(--accent-color)
-        }
-        .helper-text{
-            color: var(--error-color);
-            padding: 0.4rem 1rem;
-        }
-        @media (any-hover: hover){
-            .icon:hover{
-                background: rgba(var(--text-color), 0.1);
-            }
-        }
-    </style>
-    <label class="input">
-        <slot name = "icon"></slot>
-        <div class="container">
-            <input/>
-            <div class="label"></div>
-        </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
-    </label>
-    <div class="helper-text hide"></div>
-`;
-customElements.define('sm-input',
-    class extends HTMLElement {
-        constructor() {
-            super()
-            this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true))
-        }
-        static get observedAttributes() {
-            return ['placeholder']
-        }
-
-        get value() {
-            return this.shadowRoot.querySelector('input').value
-        }
-
-        set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
-        }
-
-        get placeholder() {
-            return this.getAttribute('placeholder')
-        }
-
-        set placeholder(val) {
-            this.setAttribute('placeholder', val)
-        }
-
-        get type() {
-            return this.getAttribute('type')
-        }
-
-        get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
-        }
-
-        preventNonNumericalInput = (e) => {
-            let keyCode = e.keyCode;
-            if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) {
-                e.preventDefault();
-            }
-        }
-
-        checkInput = () => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
-                return;
-            if (this.input.value !== '') {
-                if (this.animate)
-                    this.inputParent.classList.add('animate-label')
-                else
-                    this.label.classList.add('hide')
-                this.clearBtn.classList.remove('hide')
-            }
-            else {
-                if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
-                else
-                    this.label.classList.remove('hide')
-                this.clearBtn.classList.add('hide')
-            }
-            if (this.valueChanged) {
-                if (this.input.checkValidity()) {
-                    this.helperText.classList.add('hide')
-                    this.inputParent.style.boxShadow = ``
-                }
-                else {
-                    this.helperText.classList.remove('hide')
-                    this.inputParent.style.boxShadow = `0 0 0 0.1rem ${this.computedStyle.getPropertyValue('--error-color')}`
-                }
-            }
-        }
-
-        connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.computedStyle = window.getComputedStyle(this.inputParent)
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.helperText = this.shadowRoot.querySelector('.helper-text')
-            this.valueChanged = false;
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
-            if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('helper-text')) {
-                this.helperText.textContent = this.getAttribute('helper-text')
-            }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                }
-                else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            }
-            else
-                this.input.setAttribute('type', 'text')
-            this.input.addEventListener('keydown', e => {
-                if (this.getAttribute('type') === 'number')
-                    this.preventNonNumericalInput(e);
-            })
-            this.input.addEventListener('input', e => {
-                this.checkInput()
-            })
-            this.input.addEventListener('change', e => {
-                this.valueChanged = true;
-                if (this.input.checkValidity())
-                    this.helperText.classList.add('hide')
-                else
-                    this.helperText.classList.remove('hide')
-            })
-            this.clearBtn.addEventListener('click', e => {
-                this.input.value = ''
-                this.checkInput()
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'placeholder')
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
-            }
-        }
-    })
-
-// tab-header
-
-const smTabs = document.createElement('template')
-smTabs.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: flex;
-}
-.tabs{
-    position: relative;
-    display: grid;
-    grid-template-rows: auto 1fr;
-}
-.panel-container{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    overflow: hidden auto;
-}
-.tab-header{
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: flex-start;
-    gap: 1rem;
-    position: relative;
-    overflow: auto hidden;
-    max-width: 100%;
-    scrollbar-width: 0;
-    margin-bottom: 1rem;
-}
-.indicator{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 0.15rem;
-    border-radius: 1rem 1rem 0 0;  
-    background: var(--accent-color);
-    transition: transform 0.3s, width 0.3s;
-}
-:host([variant="tab"]) .indicator{
-    height: 100%;
-    border-radius: 0.2rem
-}
-:host([variant="tab"]) .tab-header{
-    border-bottom: none; 
-}
-.hide-completely{
-    display: none;
-}
-:host([variant="tab"]) slot[name="tab"]::slotted(.active){
-    color: rgba(var(--foreground-color), 1);
-}
-
-slot[name="tab"]::slotted(.active){
-    color: var(--accent-color);
-    opacity: 1;
-}
-slot[name="panel"]::slotted(.hide-completely){
-    display: none;
-}
-@media (hover: none){
-    .tab-header::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    .tab-header::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-}         
-</style>
-<div class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot name="tab">Nothing to see here</slot>
-        <div class="indicator"></div>
-    </div>
-    <div part="panel-container" class="panel-container">
-        <slot name="panel">Nothing to see here</slot>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tabs', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true))
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
-        this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-    }
-    connectedCallback() {
-
-        //animations
-        let flyInLeft = [
-            {
-                opacity: 0,
-                transform: 'translateX(-1rem)'
-            },
-            {
-                opacity: 1,
-                transform: 'none'
-            }
-        ],
-            flyInRight = [
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyOutLeft = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                }
-            ],
-            flyOutRight = [
-                {
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                }
-            ],
-            animationOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-        this.prevTab
-        this.allTabs
-
-        this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => {
-            this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => {
-                panel.classList.add('hide-completely')
-            })
-        })
-        this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => {
-            this.allTabs = this.shadowRoot.querySelector('slot[name="tab"]').assignedElements();
-            this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => {
-                panel.setAttribute('rank', index + 1)
-            })
-        })
-        this._targetBodyFlyRight = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInRight, animationOptions)
-        }
-        this._targetBodyFlyLeft = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInLeft, animationOptions)
-        }
-        this.tabSlot.addEventListener('click', e => {
-            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
-                return
-            if (this.prevTab)
-                this.prevTab.classList.remove('active')
-            e.target.classList.add('active')
-
-            e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
-            this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-
-            if (this.prevTab) {
-                let targetBody = e.target.nextElementSibling,
-                    currentBody = this.prevTab.nextElementSibling;
-
-                if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyRight(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyRight(targetBody)
-                        }
-                    }
-                } else {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyLeft(targetBody)
-                    }
-                    else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyLeft(targetBody)
-                        }
-                    }
-                }
-            } else {
-                e.target.nextElementSibling.classList.remove('hide-completely')
-            }
-            this.prevTab = e.target;
-        })
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => { 
-                if (this.prevTab) {
-                    let tabDimensions = this.prevTab.getBoundingClientRect();
-                    this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    let activeElement = this.tabSlot.assignedElements().filter(element => {
-                        if (element.classList.contains('active'))
-                            return true
-                    })
-                    if (activeElement.length) {
-                        let tabDimensions = activeElement[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                    }
-                    else {
-                        this.tabSlot.assignedElements()[0].classList.add('active')
-                        this.panelSlot.assignedElements()[0].classList.remove('hide-completely')
-                        let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
-                        this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                    }
-                }
-            })
-        },
-            { threshold: 1.0 })
-        observer.observe(this)
-        if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick') == 'true') {
-            let touchStartTime = 0,
-                touchEndTime = 0,
-                swipeTimeThreshold = 200,
-                swipeDistanceThreshold = 20,
-                startingPointX = 0,
-                endingPointX = 0,
-                currentIndex = 0;
-            this.addEventListener('touchstart', e => {
-                touchStartTime = e.timeStamp
-                startingPointX = e.changedTouches[0].clientX
-            })
-            this.panelSlot.addEventListener('touchend', e => {
-                touchEndTime = e.timeStamp
-                endingPointX = e.changedTouches[0].clientX
-                if (touchEndTime - touchStartTime < swipeTimeThreshold) {
-                    currentIndex = this.allTabs.findIndex(element => element.classList.contains('active'))
-                    if (startingPointX > endingPointX && startingPointX - endingPointX > swipeDistanceThreshold && currentIndex < this.allTabs.length) {
-                        this.allTabs[currentIndex + 1].click()
-                    }
-                    else if (startingPointX < endingPointX && endingPointX - startingPointX > swipeDistanceThreshold && currentIndex > 0) {
-                        this.allTabs[currentIndex - 1].click()
-                    }
-                }
-            })
-        }
-    }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    position: relative;
-    display: inline-flex;
-    z-index: 1;
-}
-.tab{
-    position: relative;
-    user-select: none;
-    justify-content: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    white-space: nowrap;
-    padding: 0.6rem 0.8rem;
-    font-weight: 500;
-    word-spacing: 0.1em;
-    text-align: center;
-    transition: color 0.3s;
-    text-transform: capitalize;
-    font-family: var(--font-family);
-}
-@media (hover: hover){
-    :host(.active) .tab{
-        opacity: 1;
-    }
-    .tab{
-        opacity: 0.7
-    }
-    .tab:hover{
-        opacity: 1
-    }
-}
-</style>
-<div class="tab">
-    <slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true))
-    }
-})
-
-//chcekbox
-
-const smCheckbox = document.createElement('template')
-smCheckbox.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: inline-flex;
-}
-.checkbox {
-    position: relative;
-    display:flex;
-    align-items: center;
-    cursor: pointer;
-    height: 1.5rem;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-}
-
-p{
-    margin-left: 2rem;
-}
-
-.checkbox:active .icon,
-.checkbox:focus .icon{
-    background: rgba(var(--text-color), 0.2);
-}
-
-.checkbox input {
-  display: none;
-}
-
-.checkbox .checkmark {
-    stroke-dashoffset: -65;
-    stroke-dasharray: 65;
-    -webkit-transition: stroke-dashoffset 0.3s; 
-    transition: stroke-dashoffset 0.3s;
-}
-
-.checkbox input:checked ~ svg .checkmark {
-    stroke-dashoffset: 0;
-    stroke: rgba(var(--foreground-color), 1);
-}
-.checkbox input:checked ~ svg {
-    stroke: var(--accent-color);
-    fill: var(--accent-color);
-    stroke-width: 8; 
-}
-
-.icon {
-    position: absolute;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.7rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    border-radius: 2rem;
-    transition: background 0.3s;
-    left: -0.5rem;
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-</style>
-<label class="checkbox" tabindex="0">
-    <input type="checkbox">
-    <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
-        <rect class="box" x="0" y="0" width="64" height="64" rx="4" />
-        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
-    </svg>
-    <p><slot></slot></p>
-</label>`
-customElements.define('sm-checkbox', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smCheckbox.content.cloneNode(true))
-        
-        this.checkbox = this.shadowRoot.querySelector('.checkbox');
-        this.input = this.shadowRoot.querySelector('input')
-        
-        this.isChecked = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.getAttribute('checked')
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.checkbox.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.checkbox.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-
-})
-
-//audio
-
-const smAudio = document.createElement('template')
-smAudio.innerHTML = `
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-	display: flex;
-}
-
-.audio{
-  position: relative;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-align: center;
-          align-items: center;
-  -webkit-user-select: none;
-          user-select: none;
-  padding: 0.6rem;
-  border-radius: 0.2rem;
-  background: rgba(var(--text-color), 0.08);
-  overflow: hidden;
-  width: 100%;
-}
-
-.hide {
-  display: none;
-}
-
-.icon{
-  stroke: rgba(var(--text-color), 1);
-  stroke-width: 6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-  overflow: visible;
-  height: 2.1rem;
-  width: 2.1rem;
-  padding: 0.6rem;
-  cursor: pointer;
-  border-radius: 2rem;
-  margin-right: 0.5rem;
-}
-
-.icon:hover{
-  background: rgba(var(--text-color), 0.1);
-}
-
-audio {
-  display: none;
-}
-
-.track {
-  position: absolute;
-  height: 0.2rem;
-  bottom: 0;
-  background: var(--accent-color);
-  left: 0;
-  -webkit-transition: width 0.2s;
-  transition: width 0.2s;
-  pointer-events: none;
-  z-index: 0;
-  border-radius: 0.2rem;
-}
-
-.disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-</style>
-	<div class="audio">
-		<svg class="icon play" viewBox="-6 0 64 64">
-			<title>play</title>
-			<path d="M57.12,26.79,12.88,1.31a6,6,0,0,0-9,5.21v51a6,6,0,0,0,9,5.21L57.12,37.21A6,6,0,0,0,57.12,26.79Z"/>
-		</svg>
-		<svg class="icon pause hide" viewBox="0 0 64 64">
-			<title>pause</title>
-			<line x1="17.5" x2="17.5" y2="64"/>
-			<line x1="46.5" x2="46.5" y2="64"/>
-		</svg>
-		<h5 class="current-time"></h5> / <h5 class="duration"></h5>
-		<audio src=""></audio>
-		<div class="track"></div>
-	</audio>
-`;
-
-customElements.define('sm-audio', class extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' }).append(smAudio.content.cloneNode(true))
-
-        this.playing = false;
-    }
-    static get observedAttributes() {
-        return ['src']
-    }
-    play() {
-        this.audio.play()
-        this.playing = false;
-        this.pauseBtn.classList.remove('hide')
-        this.playBtn.classList.add('hide')
-    }
-    pause() {
-        this.audio.pause()
-        this.playing = true;
-        this.pauseBtn.classList.add('hide')
-        this.playBtn.classList.remove('hide')
-    }
-
-    get isPlaying() {
-        return this.playing;
-    }
-
-    connectedCallback() {
-        this.playBtn = this.shadowRoot.querySelector('.play');
-        this.pauseBtn = this.shadowRoot.querySelector('.pause');
-        this.audio = this.shadowRoot.querySelector('audio')
-        this.playBtn.addEventListener('click', e => {
-            this.play()
-        })
-        this.pauseBtn.addEventListener('click', e => {
-            this.pause()
-        })
-        this.audio.addEventListener('ended', e => {
-            this.pause()
-        })
-        let width;
-        if ('ResizeObserver' in window) {
-            let resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    width = entry.contentRect.width;
-                })
-            })
-            resizeObserver.observe(this)
-        }
-        else {
-            let observer = new IntersectionObserver((entries, observer) => {
-                if (entries[0].isIntersecting)
-                    width = this.shadowRoot.querySelector('.audio').offsetWidth;
-            }, {
-                threshold: 1
-            })
-            observer.observe(this)
-        }
-        this.audio.addEventListener('timeupdate', e => {
-            let time = this.audio.currentTime,
-                minutes = Math.floor(time / 60),
-                seconds = Math.floor(time - minutes * 60),
-                y = seconds < 10 ? "0" + seconds : seconds;
-            this.shadowRoot.querySelector('.current-time').textContent = `${minutes}:${y}`
-            this.shadowRoot.querySelector('.track').style.width = (width / this.audio.duration) * this.audio.currentTime + 'px'
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'src') {
-                if (this.hasAttribute('src') && newValue.trim() !== '') {
-                    this.shadowRoot.querySelector('audio').src = newValue;
-                    this.shadowRoot.querySelector('audio').onloadedmetadata = () => {
-                        let duration = this.audio.duration,
-                            minutes = Math.floor(duration / 60),
-                            seconds = Math.floor(duration - minutes * 60),
-                            y = seconds < 10 ? "0" + seconds : seconds;
-                        this.shadowRoot.querySelector('.duration').textContent = `${minutes}:${y}`;
-                    }
-                }
-                else
-                    this.classList.add('disabled')
-            }
-        }
-    }
-})
-
-//switch
-
-const smSwitch = document.createElement('template')
-smSwitch.innerHTML = `	
-<style>
-*{
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-:host{
-    display: inline-flex;
-}
-.switch {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 2.4rem;
-    padding: 0.2rem;
-    cursor: pointer;
-    outline: none;
-    border-radius: 2rem;
-    -webkit-tap-highlight-color: transparent;
-}
-
-input {
-    display: none;
-}
-
-.track {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1.4rem;
-    -webkit-transition: background 0.3s;
-    transition: background 0.3s;
-    background: rgba(var(--text-color), 0.4);
-    box-shadow: 0 0.1rem 0.3rem #00000040 inset;
-    border-radius: 1rem;
-}
-
-.switch:active .button::after,
-.switch:focus .button::after{
-    opacity: 1
-}
-.switch:focus:not(:focus-visible){
-    opacity: 0;
-}
-.switch:focus-visible .button::after{
-    opacity: 1
-}
-
-.button::after{
-    content: '';
-    display: flex;
-    position: absolute;
-    height: 2.6rem;
-    width: 2.6rem;
-    background: rgba(var(--text-color), 0.2);
-    border-radius: 2rem;
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.button {
-    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;
-    transition: transform 0.3s;
-    border: solid 0.3rem rgba(var(--foreground-color), 1);
-}
-
-input:checked ~ .button {
-    transform: translateX(100%);
-}
-
-input:checked ~ .track {
-    background: var(--accent-color);
-}
-.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-</style>
-<label class="switch" tabindex="0">
-    <input type="checkbox">
-    <div class="track"></div>
-    <div class="button"></div>
-</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
-    }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
-    }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        this.setAttribute('checked', value)
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
-            }
-        })
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.switch.classList.add('disabled')
-                    this.isDisabled = true
-                }
-                else {
-                    this.switch.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            if (name === 'checked') {
-                if (newValue == 'true') {
-                    this.isChecked = true
-                    this.input.checked = true
-                    this.dispatch()
-                }
-                else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
-                }
-            }
-        }
-    }
-})
-
-// select
-const smSelect = document.createElement('template')
-smSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .icon {
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .option-text{
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .selection{
-                border-radius: 0.2rem;
-                display: grid;
-                grid-template-columns: 1fr auto;
-                grid-template-areas: 'heading heading' '. .';
-                padding: 0.4rem 1rem;
-                background: rgba(var(--text-color), 0.06);
-                border: solid 1px rgba(var(--text-color), 0.2);
-                align-items: center;
-                outline: none;
-            }
-            .selection:focus{
-                box-shadow: 0 0 0 0.1rem var(--accent-color) 
-            }
-            .icon{
-                margin-left: 1rem;
-            }
-            :host([align-select="left"]) .options{
-                left: 0;
-            }
-            :host([align-select="right"]) .options{
-                right: 0;
-            }
-            .options{
-                top: 100%;
-                margin-top: 0.5rem; 
-                overflow: hidden auto;
-                position: absolute;
-                grid-area: options;
-                display: flex;
-                flex-direction: column;
-                min-width: 100%;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, top 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-            }
-            .rotate{
-                transform: rotate(180deg)
-            }
-        </style>
-        <div class="select" >
-            <div class="selection" tabindex="0">
-                <div class="option-text"></div>
-                <svg class="icon toggle" viewBox="0 0 64 64">
-                    <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-
-    collapse = () => {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
-        this.chevron.classList.remove('rotate')
-        this.open = false
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        this.chevron = this.shadowRoot.querySelector('.toggle')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            selection = this.shadowRoot.querySelector('.selection'),
-            previousOption
-        this.open = false;
-            this.slideDown = [
-                { transform: `translateY(-0.5rem)` },
-                { transform: `translateY(0)` }
-            ],
-            this.slideUp = [
-                { transform: `translateY(0)` },
-                { transform: `translateY(-0.5rem)` }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
-            }
-        selection.addEventListener('click', e => {
-            if (!this.open) {
-                this.optionList.classList.remove('hide')
-                this.optionList.animate(this.slideDown, this.animationOptions)
-                this.chevron.classList.add('rotate')
-                this.open = true
-            } else {
-                this.collapse()
-            }
-        })
-        selection.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space')
-                if (!this.open) {
-                    this.optionList.classList.remove('hide')
-                    this.optionList.animate(this.slideDown, this.animationOptions)
-                    this.chevron.classList.add('rotate')
-                    this.open = true
-                } else {
-                    this.collapse()
-                }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.addEventListener('optionSelected', e => {
-            if (previousOption !== e.target) {
-                this.setAttribute('value', e.detail.value)
-                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true
-                }))
-                if (previousOption) {
-                    previousOption.classList.remove('check-selected')
-                }
-                previousOption = e.target;
-            }
-            if(!e.detail.switching)
-                this.collapse()
-
-            e.target.classList.add('check-selected')
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                this.availableOptions.forEach((element, index) => {
-                    element.setAttribute('data-rank', index + 1);
-                    element.setAttribute('tabindex', "0");
-                })
-            }
-        });
-        document.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && this.open) {
-                this.collapse()
-            }
-        })
-    }
-})
-
-// option
-const smOption = document.createElement('template')
-smOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.2rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                display: flex;
-                align-items: center;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            :host(:focus) .option .icon{
-                opacity: 0.4
-            }
-            :host(.check-selected) .icon{
-                opacity: 1 !important
-            }
-            .icon {
-                margin-right: 0.8rem;
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                border-radius: 1rem;
-                stroke-linejoin: round;
-                opacity: 0;
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-                .option:hover .icon{
-                    opacity: 0.4
-                }
-            }
-        </style>
-        <div class="option">
-            <svg class="icon" viewBox="0 0 64 64">
-                <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-            </svg>
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true))
-    }
-
-    sendDetails = (switching) => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value'),
-                switching: switching
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        let validKey = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ]
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-            if (validKey.includes(e.code)) {
-                e.preventDefault()
-                this.sendDetails(true)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }    
-            :host{
-                display: flex;
-            }
-            .icon {
-                position: absolute;
-                display: flex;
-                fill: none;
-                height: 2.6rem;
-                width: 2.6rem;
-                padding: 0.9rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 10;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                cursor: pointer;
-                min-width: 0;
-                z-index: 1;
-                background: rgba(var(--foreground-color), 1);
-                -webkit-tap-highlight-color: transparent;
-                transition: opacity 0.3s; 
-            }
-            .hide{
-                pointer-events: none;
-                opacity: 0;
-            }
-            .select-container{
-                position: relative;
-                display: flex;
-                width: 100%;
-                align-items: center;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                gap: 0.5rem;
-                max-width: 100%;
-                overflow: auto hidden;
-            }
-            .previous-item{
-                left: 0;
-            }
-            .next-item{
-                right: 0;
-            }
-            .left,.right{
-                position: absolute;
-                width: 1rem;
-                height: 100%; 
-                transition: opacity 0.3s;
-                z-index: 1;
-            }
-            .left{
-                background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-            }
-            .right{
-                right: 0;
-                background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-            }
-            slot::slotted(.active){
-                border-radius: 2rem;
-                opacity: 1;
-                background-color: rgba(var(--text-color), .6);  
-                color: rgba(var(--foreground-color), 1);
-            }
-            @media (hover: none){
-                ::-webkit-scrollbar-track {
-                    -webkit-box-shadow: none !important;
-                    background-color: transparent !important;
-                }
-                ::-webkit-scrollbar {
-                    height: 0;
-                    background-color: transparent;
-                }
-                .icon{
-                    display: none;
-                }
-                .left,.right{
-                    display: block;
-                }
-            }
-            @media (hover: hover){
-                .select{
-                    overflow: hidden;
-                }
-                .left,.right{
-                    display: none;
-                }
-            }
-        </style>
-        <div class="select-container">
-            <div class="left hide"></div>
-            <svg class="icon previous-item hide" viewBox="4 0 64 64">
-                <title>Previous</title>
-                <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-            </svg>
-            <div class="select">
-                <slot></slot> 
-            </div>
-            <svg class="icon next-item hide" viewBox="-6 0 64 64">
-                <title>Next</title>
-                <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-            </svg>
-            <div class="right hide"></div>
-        </div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            }
-            else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                padding: 0.4rem 0.8rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                border-radius: 2rem;
-                text-transform: capitalize;
-                border: solid 1px rgba(var(--text-color), .3);
-                opacity: 0.9;
-            }
-            .option:focus{
-                background: rgba(var(--text-color), 0.1);
-            }
-
-            @media (hover: hover){
-                .option{
-                    transition: background 0.3s;
-                }
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option" tabindex="0">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
-    }
-    sendDetails = () => {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-//popup
-const smPopup = document.createElement('template')
-smPopup.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: grid;
-    }
-    .popup-container{
-        display: grid;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        place-items: center;
-        background: #00000060;
-        z-index: 10;
-        transition: opacity 0.3s ease;
-    }
-    .popup{
-        flex-direction: column;
-        align-self: flex-end;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        width: 100%;
-        border-radius: 0.5rem 0.5rem 0 0;
-        position: relative;
-        display: flex;
-        transform: translateY(100%);
-        transition: transform 0.3s;
-        background: rgba(var(--foreground-color), 1);
-        box-shadow: 0 -1rem 2rem #00000020;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-    .container-header{
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-    }
-    .popup-top{
-        display: flex;
-        width: 100%;
-    }
-    .popup-body{
-        padding: 1.5rem;
-    }
-    .heading{
-        font-weight: 400;
-    }
-    .heading:first-letter{
-        text-transform: uppercase;
-    }
-    .hide{
-        opacity: 0;
-        pointer-events: none;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        padding: 0.4rem;
-        stroke: rgba(var(--text-color), 0.7);
-        stroke-width: 8;
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        -webkit-tap-highlight-color: transparent;
-    }
-    @media screen and (min-width: 640px){
-        .popup{
-            width: 24rem;
-            align-self: center;
-            border-radius: 0.4rem;
-            height: auto;
-            transform: translateY(0) scale(0.9);
-            box-shadow: 0 2rem 2rem #00000040;
-        }
-        .container-header{
-            padding: 1.2rem 1.5rem;
-        }
-    }
-    @media screen and (max-width: 640px){
-        .popup-top{
-            flex-direction: column;
-            align-items: center;
-        }
-        .handle{
-            height: 0.3rem;
-            width: 2rem;
-            background: rgba(var(--text-color), .2);
-            border-radius: 1rem;
-            margin: 0.5rem 0;
-        }
-        .heading{
-            padding: 1rem 1.5rem
-        }
-        .close{
-            height: 2rem;
-            width: 2rem;
-            padding: 0.55rem;
-            margin-right: 1rem;
-        }
-    }
-</style>
-<div class="popup-container hide" role="dialog">
-    <div class="popup">
-        <div class="popup-top">
-            <div class="handle"></div>
-            <div class="container-header">
-                <h3 class="heading"></h3>
-                <svg class="icon close" viewBox="0 0 64 64">
-                    <title>Close</title>
-                    <line x1="64" y1="0" x2="0" y2="64"/>
-                    <line x1="64" y1="64" x2="0" y2="0"/>
-                </svg>
-            </div>
-        </div>
-        <div 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))
-    }
-
-    resumeScrolling = () => {
-        const scrollY = document.body.style.top;
-        window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.setAttribute('style', `overflow: auto; top: initial`)
-        }, 300);
-    }
-
-    show(pinned, popupStack) {
-        this.pinned = pinned
-        this.popupStack = popupStack
-        this.popupContainer.classList.remove('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(0)';
-        else
-            this.popup.style.transform = 'scale(1)';
-        document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    }
-    hide() {
-        this.popupContainer.classList.add('hide')
-        if (window.innerWidth < 648)
-            this.popup.style.transform = 'translateY(100%)';
-        else
-            this.popup.style.transform = 'scale(0.9)';
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length === 0) {
-                this.resumeScrolling()
-            }
-        }
-        else {
-           this.resumeScrolling()
-        }
-    }
-
-    handleTouchStart = (e) => {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartY < e.changedTouches[0].clientY) {
-            this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(this.movePopup)
-        }
-        /*else {
-        offset = touchStartY - e.changedTouches[0].clientY;
-        this.popup.style.transform = `translateY(-${offset}px)`
-    }*/
-    }
-
-    handleTouchEnd = (e) => {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndY - this.touchStartY > this.threshold) {
-                this.hide()
-            }
-            else {
-                this.show()
-            }
-        }
-        else {
-            if (this.touchEndY > this.touchStartY)
-                this.hide()
-        }
-    }
-
-    movePopup = () => {
-        this.popup.style.transform = `translateY(${this.offset}px)`
-    }
-
-    connectedCallback() {
-        this.pinned = false
-        this.popupStack
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.offset
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-        this.touchEndAnimataion;
-        
-        if (this.hasAttribute('heading'))
-            this.shadowRoot.querySelector('.heading').textContent = this.getAttribute('heading')
-                
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                this.hide()
-            }
-        })
-
-        this.shadowRoot.querySelector('.close').addEventListener('click', e => {
-            this.hide()
-        })
-
-        this.popupHeader.addEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.addEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.addEventListener('touchend', this.handleTouchEnd)
-    }
-    disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
-    }
-})
-
-//carousel
-
-const smCarousel = document.createElement('template')
-smCarousel.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .icon {
-        position: absolute;
-        display: flex;
-        fill: none;
-        height: 2.6rem;
-        width: 2.6rem;
-        border-radius: 3rem;
-        padding: 0.9rem;
-        stroke: rgba(var(--foreground-color), 0.8);
-        stroke-width: 14;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-        background: rgba(var(--text-color), 1);
-        box-shadow: 0 0.2rem 0.2rem #00000020, 
-                    0 0.5rem 1rem #00000040; 
-        -webkit-tap-highlight-color: transparent;
-        transform: scale(0)
-    }
-    .hide{
-        pointer-events: none;
-        opacity: 0;
-    }
-    .expand{
-        transform: scale(1)
-    }
-    .previous-item{
-        left: 1rem;
-    }
-    .next-item{
-        right: 1rem;
-    }
-    .left,.right{
-        position: absolute;
-        width: 2rem;
-        height: 100%; 
-        transition: opacity 0.3s;
-    }
-    .left{
-        background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .right{
-        right: 0;
-        background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))
-    }
-    .carousel-container{
-        position: relative;
-        display: flex;
-        width: 100%;
-        align-items: center;
-    }
-    .carousel{
-        display: flex;
-        max-width: 100%;
-        overflow: auto hidden;
-        scroll-snap-type: x mandatory;
-    }
-    slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="start"]) slot::slotted(*){
-        scroll-snap-align: start;
-    }
-    :host([align-items="center"]) slot::slotted(*){
-        scroll-snap-align: center;
-    }
-    :host([align-items="end"]) slot::slotted(*){
-        scroll-snap-align: end;
-    }
-    @media (hover: hover){
-        .carousel{
-            overflow: hidden;
-        }
-        .left,.right{
-            display: none;
-        }
-    }
-    @media (hover: none){
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        ::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-        .carousel{
-            overflow: auto none;
-        }
-        .icon{
-            display: none;
-        }
-        .left,.right{
-            display: block;
-        }
-    }
-</style>
-<div class="carousel-container">
-    <div class="left"></div>
-    <svg class="icon previous-item" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="carousel">
-        <slot></slot>
-    </div>
-    <svg class="icon next-item" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right"></div>
-</div>
-`;
-
-customElements.define('sm-carousel', class extends HTMLElement{
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
-    }
-
-    scrollLeft = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    connectedCallback() {
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.carouselItems
-        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width/3
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.previousArrow.classList.remove('expand')
-                this.previousGradient.classList.add('hide')
-            }
-            else {
-                this.previousArrow.classList.add('expand')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })        
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting){
-                this.nextArrow.classList.remove('expand')
-                this.nextGradient.classList.add('hide')
-            }
-            else{
-                this.nextArrow.classList.add('expand')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })     
-        
-        const carouselObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-            }
-        })
-
-        carouselObserver.observe(this.carouselContainer)
-        
-        this.carouselSlot.addEventListener('slotchange', e => {
-            this.carouselItems = this.carouselSlot.assignedElements()
-            firstElementObserver.observe(this.carouselItems[0])
-            lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
-        })
-
-        this.addEventListener('keyup', e => {
-            if (e.code === 'ArrowLeft')
-                this.scrollRight()
-            else
-                this.scrollRight()
-        })
-
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-//notifications
-
-const smNotifications = document.createElement('template')
-smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    :host{
-        display: flex;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: grid;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 100;
-        max-height: 100%;
-        overflow: hidden auto;
-        overscroll-behavior: contain;
-    }
-    .inner-body{
-        padding: 1rem 1.5rem;
-    }
-    .no-transformations{
-        transform: none;
-        opacity: 1;
-    }
-    .notification{
-        opacity: 0;
-        transform: translateY(-1rem);
-        position: relative;
-        border-radius: 0.3rem;
-        box-shadow: 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-        background: rgba(var(--foreground-color), 1);
-        transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        overflow: hidden;
-        border-bottom: 1px solid rgba(var(--text-color), 0.2);
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        color: rgba(var(--text-color), 0.8);
-        overflow-wrap: break-word;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    header{
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.4rem;
-        width: 100%;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        stroke: rgba(var(--text-color), 0.7);
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-        min-width: 0;
-    }
-    .error-icon{
-        stroke: #E53935;
-    }
-    .success-icon{
-        stroke: #00C853;
-    }
-    .close{
-        margin-left: auto;
-        padding: 0.5rem;
-        stroke-width: 10;
-    }
-    .notification-icon{
-        height: 1.2rem;
-        width: 1.2rem;
-        margin-right: 0.6rem;
-        stroke-width: 6;
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            width: 40vw;
-        }
-        .notification{
-            margin-right: 1.5rem;
-            margin-bottom: 1rem;
-            border-bottom: none;
-            border: solid 1px rgba(var(--text-color), 0.2);
-            transform: translateX(1rem);
-        }
-    }
-    @media screen and (max-width: 640px){
-        .close{
-            display: none
-        }
-    }
-</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(true))
-    }
-
-    handleTouchStart = (e) => {
-        this.notification = e.target.closest('.notification')
-        this.touchStartX = e.changedTouches[0].clientX
-        this.notification.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        if (this.touchStartX < e.changedTouches[0].clientX) {
-            this.offset = e.changedTouches[0].clientX - this.touchStartX;
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-        else {
-            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-    }
-
-    handleTouchEnd = (e) => {
-        this.notification.style.transition = 'height 0.3s, transform 0.3s, opacity 0.3s'
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndX = e.changedTouches[0].clientX
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndX - this.touchStartX > this.threshold) {
-                this.removeNotification(this.notification)
-            }
-            else if (this.touchStartX - this.touchEndX > this.threshold) {
-                this.removeNotification(this.notification, true)
-            }
-            else {
-                this.resetPosition()
-            }
-        }
-        else {
-            if (this.touchEndX > this.touchStartX) {
-                this.removeNotification(this.notification)
-            }
-            else {
-                this.removeNotification(this.notification, true)
-            }
-        }
-    }
-
-    movePopup = () => {
-        this.notification.style.transform = `translateX(${this.offset}px)`
-    }
-
-    resetPosition = () => {
-        this.notification.style.transform = `translateX(0)`
-    }
-
-    push = (messageHeader, messageBody, options) => {
-        let notification = document.createElement('div'),
-            composition = ``,
-            { pinned, type } = options;
-        notification.classList.add('notification')
-        if (pinned)
-            notification.classList.add('pinned')
-        composition += `
-                            <div class="inner-body">
-                        <header>
-        `
-        if (type === 'error') {
-            composition += `
-            <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
-                    <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
-                    <line x1="32" y1="24" x2="32" y2="36"/>
-                    <line x1="32" y1="46" x2="32" y2="48"/>
-            </svg>`
-        }
-        else if (type === 'success') {
-            composition += `
-                <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
-                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-                </svg>
-            `
-        }
-        composition += `
-                            <h4>${messageHeader}</h4>
-                            <svg class="icon close" viewBox="0 0 64 64">
-                                <title>Close</title>
-                                <line x1="64" y1="0" x2="0" y2="64"/>
-                                <line x1="64" y1="64" x2="0" y2="0"/>
-                            </svg>
-                        </header>
-                        <p>${messageBody}</p>
-                    </div>`
-        notification.innerHTML = composition
-        this.notificationPanel.prepend(notification)
-        if (window.innerWidth > 640) {
-            notification.animate([
-                {
-                    transform: `translateX(1rem)`,
-                    opacity: '0'
-                },
-                {
-                    transform: 'translateX(0)',
-                    opacity: '1'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `transform: none;`);
-            }
-        }
-        else {
-            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
-        }
-        notification.addEventListener('touchstart', this.handleTouchStart)
-        notification.addEventListener('touchmove', this.handleTouchMove)
-        notification.addEventListener('touchend', this.handleTouchEnd)
-    }
-
-    removeNotification = (notification, toLeft) => {
-        notification.style.height = notification.scrollHeight + 'px';
-        if (!this.offset)
-            this.offset = 0;
-        
-        if (toLeft)
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(-100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        else {
-            notification.animate([
-                {
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `height: 0; margin-bottom: 0`);
-            }
-        }
-        setTimeout( () => {
-            notification.remove()
-        }, this.animationOptions.duration*2)
-    }
-
-    connectedCallback() {
-        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
-        this.animationOptions = {
-            duration: 300,
-            fill: "forwards",
-            easing: "ease"
-        }
-        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
-        this.notification
-        this.offset
-        this.touchStartX = 0
-        this.touchEndX = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
-        this.touchEndAnimataion;
-
-        this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close'))(
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
-
-        const observer = new MutationObserver(mutationList => {
-            mutationList.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length) {
-                        if (!mutation.addedNodes[0].classList.contains('pinned'))
-                        setTimeout(() => {
-                            this.removeNotification(mutation.addedNodes[0])
-                        }, 4000);
-                        if (window.innerWidth > 640)
-                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
-                        else
-                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
-                    }
-                    else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
-                        this.notificationPanel.style.padding = 0;
-                    }
-                }
-            })
-        })
-        observer.observe(this.notificationPanel, {
-            attributes: true,
-            childList: true,
-            subtree: true
-        })
-    }
-})
-// sm-menu
-const smMenu = document.createElement('template')
-smMenu.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .menu{
-                display: grid;
-                place-items: center;
-                position: relative;
-                height: 2rem;
-                width: 2rem;
-                outline: none;
-            }
-            .icon {
-                position: absolute;
-                fill: rgba(var(--text-color), 0.7);
-                height: 2.4rem;
-                width: 2.4rem;
-                padding: 0.7rem;
-                stroke: rgba(var(--text-color), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                border-radius: 2rem;
-                transition: background 0.3s;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-                -webkit-tap-highlight-color: transparent;
-            }
-            .menu:focus .icon,
-            .focused{
-                background: rgba(var(--text-color), 0.1); 
-            }
-            :host([align-options="left"]) .options{
-                left: 0;
-            }
-            :host([align-options="right"]) .options{
-                right: 0;
-            }
-            .options{
-                padding: 0.5rem 0;
-                overflow: hidden auto;
-                position: absolute;
-                display: flex;
-                min-width: 100%;
-                transform: translateY(-1rem);
-                flex-direction: column;
-                background: rgba(var(--foreground-color), 1);
-                transition: opacity 0.3s, transform 0.3s;
-                border: solid 1px rgba(var(--text-color), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-                box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
-                top: 100%;
-                margin: 0.4rem 0 0 0;
-                bottom: auto;
-            }
-            .moveUp{
-                top: auto;
-                margin: 0 0 0.4rem 0;
-                bottom: 100%;
-                transform: translateY(1rem);
-            }
-            .moveLeft{
-                left: auto: 
-                right: 0;
-            }
-            .no-transformations{
-                transform: none !important;
-            }
-            @media (hover: hover){
-                .menu:hover .icon{
-                    background: rgba(var(--text-color), 0.1); 
-                }
-            }
-        </style>
-        <div class="select">
-            <div class="menu" tabindex="0">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <title>options</title>
-                    <circle cx="32" cy="6" r="5.5"/>
-                    <circle cx="32" cy="58" r="5.5"/>
-                    <circle cx="32" cy="31.89" r="5.5"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-customElements.define('sm-menu', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenu.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    expand = () => {
-        if (!this.open) {
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-            this.optionList.classList.remove('hide')
-            this.optionList.classList.add('no-transformations')
-            this.open = true
-            this.icon.classList.add('focused')
-        }
-    }
-    collapse = () => {
-        if (this.open) {
-            this.open = false
-            this.icon.classList.remove('focused')
-            this.optionList.classList.add('hide')
-            this.optionList.classList.remove('no-transformations')
-        }
-    }
-    connectedCallback() {
-        this.availableOptions
-        this.containerDimensions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            menu = this.shadowRoot.querySelector('.menu')
-        this.icon = this.shadowRoot.querySelector('.icon')
-        this.open = false;
-        menu.addEventListener('click', e => {
-            if (!this.open) {
-                this.expand()
-            } else {
-                this.collapse()
-            }
-        })
-        menu.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                this.availableOptions[0].focus()
-            }
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                if (!this.open) {
-                    this.expand()
-                } else {
-                    this.collapse()
-                }
-            }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
-                e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
-            }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
-                e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
-            }
-        })
-        this.optionList.addEventListener('click', e => {
-            this.collapse()
-        })
-        slot.addEventListener('slotchange', e => {
-            this.availableOptions = slot.assignedElements()
-            this.containerDimensions = this.optionList.getBoundingClientRect()
-            this.menuDimensions = menu.getBoundingClientRect()
-            if (this.containerDimensions.left > this.containerDimensions.width) {
-                this.optionList.style.right = 0
-            }
-            else {
-                this.optionList.style.right = 'auto'
-            }
-        });
-        window.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && e.button !== 2) {
-                this.collapse()
-            }
-        })
-        if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
-            this.parentNode.setAttribute('oncontextmenu', 'return false')
-            this.parentNode.addEventListener('mouseup', e => {
-                if (e.button === 2) {
-                    this.expand()
-                }
-            })
-        }
-        const intersectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (!entry.isIntersecting && this.open) {
-                    if(window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height)
-                        this.optionList.classList.add('moveUp')
-                    else
-                        this.optionList.classList.remove('moveUp')
-                    if (entry.intersectionRect.left > this.containerDimensions.width) {
-                        this.optionList.style.right = 0
-                    }
-                    else {
-                        this.optionList.style.right = 'auto'
-                    }
-                }
-            })
-        }, {
-                threshold: 1
-        })
-        intersectionObserver.observe(this.optionList)
-    }
-})
-
-// option
-const smMenuOption = document.createElement('template')
-smMenuOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .option{
-                min-width: 100%;
-                padding: 0.8rem 1.6rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                white-space: nowrap;
-                outline: none;
-                display: flex;
-                align-items: center;
-                text-transform: capitalize;
-            }
-            :host(:focus){
-                outline: none;
-                background: rgba(var(--text-color), 0.1);
-            }
-            @media (hover: hover){
-                .option:hover{
-                    background: rgba(var(--text-color), 0.1);
-                }
-            }
-        </style>
-        <div class="option">
-            <slot></slot> 
-        </div>`;
-customElements.define('sm-menu-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({ mode: 'open' }).append(smMenuOption.content.cloneNode(true))
-    }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.click()
-            }
-        })
-        this.setAttribute('tabindex', '0')
-    }
-})
\ No newline at end of file
diff --git a/Layouts/tabs layout/js/components.min.js b/Layouts/tabs layout/js/components.min.js
new file mode 100644
index 0000000..7078968
--- /dev/null
+++ b/Layouts/tabs layout/js/components.min.js	
@@ -0,0 +1,9 @@
+const smButton=document.createElement("template");smButton.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    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</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(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
+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 smForm=document.createElement("template");smForm.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --gap: 1rem;\n        width: 100%;\n    }\n    form{\n        display: grid;\n        gap: var(--gap);\n        width: 100%;\n    }\n    </style>\n\t<form onsubmit="return false">\n\t\t<slot></slot>\n\t</form>\n',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.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this)}debounce(t,e){let n=null;return(...s)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,s)},e)}}handleInput(t){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"===t.key&&this.allRequiredValid&&this.submitButton.click()}reset(){this.formElements.forEach(t=>t.reset())}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.hasAttribute("required")),this.submitButton=t.target.assignedElements().find(t=>"primary"===t.getAttribute("variant")||"submit"===t.getAttribute("type")),this.resetButton=t.target.assignedElements().find(t=>"reset"===t.getAttribute("type")),this.resetButton&&this.resetButton.addEventListener("click",this.reset)}),this.addEventListener("input",this.debounce(this.handleInput,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this.handleInput,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}});
+const smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\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    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --font-size: 1rem;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    opacity: .7;\n    font-weight: 400;\n    font-size: var(--font-size);\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: var(--font-size);\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 1rem;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',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._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.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)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}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 isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <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>\n                        ${this._errorText}\n                        `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
+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 smPopup=document.createElement("template");smPopup.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: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    -webkit-transform: scale(1) translateY(100%);\n            transform: scale(1) translateY(100%);\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n    content-visibility: auto;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding);\n    overflow-y: auto;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    visiblity: none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.4rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-transform: scale(1) translateY(3rem);\n                transform: scale(1) translateY(3rem);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\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}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',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.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),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.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.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
+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 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);
\ No newline at end of file
diff --git a/Layouts/tabs layout/js/helper.js b/Layouts/tabs layout/js/helper.js
deleted file mode 100644
index a7c51ee..0000000
--- a/Layouts/tabs layout/js/helper.js	
+++ /dev/null
@@ -1,133 +0,0 @@
-if (!navigator.onLine)
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-window.addEventListener('offline', () => {
-    notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
-})
-window.addEventListener('online', () => {
-    notify('We are back online.', '', '', true)
-})
-let themeToggler = document.getElementById("theme_toggle")
-if (localStorage.theme === "dark") {
-    darkTheme()
-    themeToggler.checked = true;
-} else {
-    lightTheme()
-    themeToggler.checked = false;
-}
-
-function lightTheme() {
-    document.body.setAttribute("data-theme", "light");
-}
-
-function darkTheme() {
-    document.body.setAttribute("data-theme", "dark");
-}
-themeToggler.addEventListener("change", () => {
-    if (themeToggler.checked) {
-        darkTheme()
-        localStorage.setItem("theme", "dark");
-    } else {
-        lightTheme()
-        localStorage.setItem("theme", "light");
-    }
-})
-
-// function required for popups or modals to appear
-class Stack {
-    constructor() {
-        this.items = [];
-    }
-    push(element) {
-        this.items.push(element);
-    }
-    pop() {
-        if (this.items.length == 0)
-            return "Underflow";
-        return this.items.pop();
-    }
-    peek(index) {
-        let newIndex = index ? index : 1
-        return this.items[this.items.length - index];
-    }
-}
-let popupStack = new Stack(),
-    zIndex = 10;
-function showPopup(popup, permission) {
-    let thisPopup = document.getElementById(popup);
-    document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
-    popupStack.push({ thisPopup, permission })
-    thisPopup.show(permission, popupStack)
-    zIndex++;
-    thisPopup.setAttribute('style', `z-index: ${zIndex}`)
-    return thisPopup;
-}
-function setAttributes(el, attrs) {
-    for (var key in attrs) {
-        el.setAttribute(key, attrs[key]);
-    }
-}
-// displays a popup for asking permission. Use this instead of JS confirm
-let confirmation = function (message) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('confirmation');
-        showPopup('confirmation')
-        popup.querySelector('#confirm_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(true);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(false);
-        }
-    })
-}
-
-// displays a popup for asking user input. Use this instead of JS prompt
-let askPrompt = function (message, defaultVal) {
-    return new Promise(resolve => {
-        let popup = document.getElementById('prompt'),
-            input = popup.querySelector('input');
-        if (defaultVal)
-            input.value = defaultVal;
-        showPopup('prompt')
-        input.focus()
-        input.addEventListener('keyup', e => {
-            if (e.key === 'Enter') {
-                resolve(input.value);
-                hidePopup()
-            }
-        })
-        popup.querySelector('#prompt_message').textContent = message;
-        popup.querySelector('.submit-btn').onclick = () => {
-            hidePopup()
-            resolve(input.value);
-        }
-        popup.querySelector('.cancel-btn').onclick = () => {
-            hidePopup()
-            resolve(null);
-        }
-    })
-}
-
-function formatedTime(time) {
-    let timeFrag = new Date(parseInt(time)).toString().split(' '),
-        day = timeFrag[0],
-        month = timeFrag[1],
-        date = timeFrag[2],
-        year = timeFrag[3],
-        hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
-        finalTime = '';
-    parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
-    return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
-}
-
-function copyToClipboard(parent) {
-    let toast = document.getElementById('textCopied'),
-        textToCopy = parent.querySelector('.copy').textContent;
-    navigator.clipboard.writeText(textToCopy)
-    toast.classList.remove('hide');
-    setTimeout(() => {
-        toast.classList.add('hide');
-    }, 2000)
-}
\ No newline at end of file
diff --git a/Layouts/tabs layout/js/main_UI.js b/Layouts/tabs layout/js/main_UI.js
new file mode 100644
index 0000000..b4d9afd
--- /dev/null
+++ b/Layouts/tabs layout/js/main_UI.js	
@@ -0,0 +1,282 @@
+// Global variables
+const domRefs = {};
+const appPages = ['home']
+
+
+//Checks for internet connection status
+if (!navigator.onLine)
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { sound: true }
+    );
+window.addEventListener("offline", () => {
+    notify(
+        "There seems to be a problem connecting to the internet, Please check you internet connection.",
+        "error",
+        { pinned: true, sound: true }
+    );
+});
+window.addEventListener("online", () => {
+    getRef("notification_drawer").clearAll();
+    notify("We are back online.", "success");
+});
+
+// Use instead of document.getElementById
+function getRef(elementId) {
+    if (!domRefs.hasOwnProperty(elementId)) {
+        domRefs[elementId] = {
+            count: 1,
+            ref: null,
+        };
+        return document.getElementById(elementId);
+    } else {
+        if (domRefs[elementId].count < 3) {
+            domRefs[elementId].count = domRefs[elementId].count + 1;
+            return document.getElementById(elementId);
+        } else {
+            if (!domRefs[elementId].ref)
+                domRefs[elementId].ref = document.getElementById(elementId);
+            return domRefs[elementId].ref;
+        }
+    }
+}
+
+// returns dom with specified element
+function createElement(tagName, obj) {
+    const { className, textContent, innerHTML, attributes = {} } = obj
+    const elem = document.createElement(tagName)
+    for (let attribute in attributes) {
+        elem.setAttribute(attribute, attributes[attribute])
+    }
+    if (className)
+        elem.className = className
+    if (textContent)
+        elem.textContent = textContent
+    if (innerHTML)
+        elem.innerHTML = innerHTML
+    return elem
+}
+
+// Use when a function needs to be executed after user finishes changes
+const debounce = (callback, wait) => {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}
+
+// Limits the rate of function execution
+let timerId;
+function throttle(func, delay) {
+    // If setTimeout is already scheduled, no need to do anything
+    if (timerId) {
+        return;
+    }
+
+    // Schedule a setTimeout after delay seconds
+    timerId = setTimeout(function () {
+        func();
+
+        // Once setTimeout function execution is finished, timerId = undefined so that in
+        // the next scroll event function execution can be scheduled by the setTimeout
+        timerId = undefined;
+    }, delay);
+}
+
+// function required for popups or modals to appear
+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];
+    }
+}
+let popupStack = new Stack(),
+    zIndex = 10;
+
+async function showPopup(popup, pinned) {
+    zIndex++
+    getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
+    popupStack = getRef(popup).show({ pinned, popupStack })
+    return getRef(popup);
+}
+
+// hides the popup or modal 
+function hidePopup() {
+    if (popupStack.peek() === undefined)
+        return;
+    popupStack.peek().popup.hide()
+}
+
+// displays a popup for asking permission. Use this instead of JS confirm
+let getConfirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+    return new Promise(resolve => {
+        showPopup('confirmation_popup', true)
+        getRef('confirm_title').textContent = title;
+        getRef('confirm_message').textContent = message;
+        let cancelButton = getRef('confirmation_popup').children[2].children[0],
+            submitButton = getRef('confirmation_popup').children[2].children[1]
+        submitButton.textContent = confirmText
+        cancelButton.textContent = cancelText
+        submitButton.onclick = () => {
+            hidePopup()
+            resolve(true);
+        }
+        cancelButton.onclick = () => {
+            hidePopup()
+            resolve(false);
+        }
+    })
+}
+
+// displays a popup for asking user input. Use this instead of JS prompt
+async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") {
+    showPopup('prompt_popup', true)
+    getRef('prompt_title').textContent = title;
+    let input = getRef('prompt_input');
+    input.setAttribute("placeholder", message)
+    let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
+    if (showText)
+        input.setAttribute("type", "text")
+    else
+        input.setAttribute("type", "password")
+    input.focusIn()
+    buttons[0].textContent = falseBtn;
+    buttons[1].textContent = trueBtn;
+    return new Promise((resolve, reject) => {
+        buttons[0].onclick = () => {
+            hidePopup()
+            return;
+        }
+        buttons[1].onclick = () => {
+            let value = input.value;
+            hidePopup()
+            resolve(value)
+        }
+    })
+}
+
+//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+function notify(message, mode, options = {}) {
+    const { pinned = false, sound } = options
+    if (mode === "error") console.error(message);
+    let icon
+    switch (mode) {
+        case 'success':
+            icon = `<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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+            break;
+        case 'error':
+            icon = `<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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+            break;
+    }
+    getRef("notification_drawer").push(message, { pinned, icon });
+    if (navigator.onLine && sound) {
+        getRef("notification_sound").currentTime = 0;
+        getRef("notification_sound").play();
+    }
+}
+
+const currentYear = new Date().getFullYear();
+function getFormatedTime(time, relative) {
+    try {
+        if (String(time).indexOf("_")) time = String(time).split("_")[0];
+        const intTime = parseInt(time);
+        if (String(intTime).length < 13) time *= 1000;
+        let timeFrag = new Date(intTime).toString().split(" "),
+            day = timeFrag[0],
+            month = timeFrag[1],
+            date = timeFrag[2],
+            year = timeFrag[3],
+            minutes = new Date(intTime).getMinutes(),
+            hours = new Date(intTime).getHours(),
+            currentTime = new Date().toString().split(" ");
+
+        minutes = minutes < 10 ? `0${minutes}` : minutes;
+        let finalHours = ``;
+        if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
+        else if (hours === 0) finalHours = `12:${minutes}`;
+        else finalHours = `${hours}:${minutes}`;
+
+        finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
+        if (relative) {
+            return `${date} ${month} ${year}`;
+        } else return `${finalHours} ${month} ${date} ${year}`;
+    } catch (e) {
+        console.error(e);
+        return time;
+    }
+}
+
+window.addEventListener('hashchange', e => showPage(window.location.hash))
+window.addEventListener("load", () => {
+    document.body.classList.remove('hide-completely')
+    showPage(window.location.hash)
+    // document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
+    document.addEventListener('keyup', (e) => {
+        if (e.code === 'Escape') {
+            hidePopup()
+        }
+    })
+    document.addEventListener("pointerdown", (e) => {
+        if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+            createRipple(e, e.target.closest("button, sm-button, .interact"));
+        }
+    });
+    document.addEventListener('copy', () => {
+        notify('copied', 'success')
+    })
+});
+
+function createRipple(event, target) {
+    const circle = document.createElement("span");
+    const diameter = Math.max(target.clientWidth, target.clientHeight);
+    const radius = diameter / 2;
+    const targetDimensions = target.getBoundingClientRect();
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+    circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+    circle.classList.add("ripple");
+    const rippleAnimation = circle.animate(
+        [
+            {
+                transform: "scale(3)",
+                opacity: 0,
+            },
+        ],
+        {
+            duration: 1000,
+            fill: "forwards",
+            easing: "ease-out",
+        }
+    );
+    target.append(circle);
+    rippleAnimation.onfinish = () => {
+        circle.remove();
+    };
+}
+
+function showPage(targetPage) {
+    let pageId
+    if (targetPage === '') {
+        pageId = 'overview_page'
+    }
+    else {
+        pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
+    }
+    if(!appPages.includes(pageId)) return
+    document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
+    getRef(pageId).classList.remove('hide-completely')
+}
\ No newline at end of file
diff --git a/components/components.min.js b/components/components.min.js
new file mode 100644
index 0000000..c7a4723
--- /dev/null
+++ b/components/components.min.js
@@ -0,0 +1,21 @@
+const smButton=document.createElement("template");smButton.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    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</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(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
+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 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        <title>checkbox</title>\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.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")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){"Space"===e.code&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),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-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    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n    --button-border-radius: 0.3rem;\n}\n.copy{\n    display: grid;\n    gap: 1rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\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);\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</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)}});
+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.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],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"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}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.filesPreviewWraper.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.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(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 smForm=document.createElement("template");smForm.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --gap: 1rem;\n        width: 100%;\n    }\n    form{\n        display: grid;\n        gap: var(--gap);\n        width: 100%;\n    }\n    </style>\n\t<form onsubmit="return false">\n\t\t<slot></slot>\n\t</form>\n',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.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this)}debounce(t,e){let n=null;return(...s)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,s)},e)}}handleInput(t){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"===t.key&&this.allRequiredValid&&this.submitButton.click()}reset(){this.formElements.forEach(t=>t.reset())}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.hasAttribute("required")),this.submitButton=t.target.assignedElements().find(t=>"primary"===t.getAttribute("variant")||"submit"===t.getAttribute("type")),this.resetButton=t.target.assignedElements().find(t=>"reset"===t.getAttribute("type")),this.resetButton&&this.resetButton.addEventListener("click",this.reset)}),this.addEventListener("input",this.debounce(this.handleInput,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this.handleInput,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}});
+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 smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\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    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --font-size: 1rem;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    opacity: .7;\n    font-weight: 400;\n    font-size: var(--font-size);\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: var(--font-size);\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 1rem;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',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._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.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)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}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 isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <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>\n                        ${this._errorText}\n                        `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
+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 smPopup=document.createElement("template");smPopup.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: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    -webkit-transform: scale(1) translateY(100%);\n            transform: scale(1) translateY(100%);\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n    content-visibility: auto;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding);\n    overflow-y: auto;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    visiblity: none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.4rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-transform: scale(1) translateY(3rem);\n                transform: scale(1) translateY(3rem);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\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}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',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.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),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.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.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
+const smRadio=document.createElement("template");smRadio.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        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --gap: 0.5rem;\n        --height: 1.4rem;\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .hide{\n        display: none !important;\n    }\n    .radio{\n        display: flex;\n        cursor: pointer;\n    }\n    .radio__button{\n        position: relative;\n        height: var(--height);\n        width: var(--height);\n        overflow: visible;\n        padding: 0.1rem;\n    }\n    .outer-disc{\n        fill: none;\n        stroke-width: 3;\n        stroke: rgba(var(--text-color), 0.7);\n    }\n    .inner-disc{\n        fill: var(--accent-color);\n        transition: transform 0.3s;\n        transform: scale(0);\n        transform-origin: center;\n    }\n    :host([checked]) .outer-disc{\n        stroke: var(--accent-color);\n    }\n    :host([checked]) .inner-disc{\n        transform: scale(1);\n    }\n\n    @media (any-hover: hover){\n    }\n</style>\n<div class="radio">\n    <slot name="left"></slot>\n    <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n    <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n<t;n++)e+=i.charAt(Math.floor(Math.random()*i.length));return e}connectedCallback(){this.uniqueId=this.randString(8),this.options={bubbles:!0,composed:!0,detail:{uid:this.uniqueId,value:this.value}},this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
+const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\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    }\n    label{\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        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host(:not([disabled])) label:focus-visible{\n        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n            box-shadow: 0 0 0 0.1rem var(--accent-color);\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\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        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        background: rgba(var(--text-color), 0.4);\n        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n                box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    .switch:active .button::after,\n    .switch:focus .button::after{\n        opacity: 1\n    }\n    .switch:focus-visible .button::after{\n        opacity: 1\n    }\n    \n    .button::after{\n        content: \'\';\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n    \n    .button {\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        border-radius: 1rem;\n        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;\n                box-shadow: 0 0.1rem 0.4rem #00000060;\n        -webkit-transition: -webkit-transform 0.3s;\n        transition: -webkit-transform 0.3s;\n        -o-transition: transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s;\n        border: solid 0.3rem white;\n    }\n    \n    input:checked ~ .button {\n        -webkit-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n                transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="button"></div>\n    </div>\n    <slot name="right"></slot>\n</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(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",n=>{"Space"!==n.code||this.isDisabled||(n.preventDefault(),this.input.click())}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,t,e){t!==e&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
+const smSelect=document.createElement("template");smSelect.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    --max-height: auto;\n    --min-width: 100%;\n}\n:host([disabled]) .select{\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n.hide{\n    display: none !important;\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.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: rgba(var(--text-color), 0.7);\n}      \n.selected-option-text{\n    font-size: 0.9rem;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.selection{\n    border-radius: 0.3rem;\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 1fr auto;\n    grid-template-columns: 1fr auto;\n        grid-template-areas: \'heading heading\' \'. .\';\n    padding: 0.4rem 1rem;\n    background: rgba(var(--text-color), 0.06);\n    border: solid 1px rgba(var(--text-color), 0.2);\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    outline: none;\n}\n.selection:focus{\n    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n            box-shadow: 0 0 0 0.1rem var(--accent-color) \n}\n.icon{\n    margin-left: 1rem;\n}\n:host([align-select="left"]) .options{\n    left: 0;\n}\n:host([align-select="right"]) .options{\n    right: 0;\n}\n.options{\n    top: 100%;\n    margin-top: 0.2rem; \n    overflow: hidden auto;\n    position: absolute;\n    grid-area: options;\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    min-width: var(--min-width);\n    max-height: var(--max-height);\n    background: rgba(var(--background-color), 1);\n    border: solid 1px rgba(var(--text-color), 0.2);\n    border-radius: 0.3rem;\n    z-index: 2;\n    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n}\n.rotate{\n    -webkit-transform: rotate(180deg);\n        -ms-transform: rotate(180deg);\n            transform: rotate(180deg)\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 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}\n</style>\n<div class="select" >\n    <div class="selection">\n        <div class="selected-option-text"></div>\n        <svg class="icon toggle" 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>\n    </div>\n    <div part="options" class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.availableOptions,this.previousOption,this.isOpen=!1,this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e)}reset(){}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(e){"ArrowUp"===e.code?(e.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===e.code&&(e.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(e){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.selectedOptionText.textContent=document.activeElement.textContent,this.fireEvent(),this.previousOption&&this.previousOption.classList.remove("check-selected"),document.activeElement.classList.add("check-selected"),this.previousOption=document.activeElement)}handleClick(e){e.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(e){e.target===this?this.isOpen&&"ArrowDown"===e.code?(e.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(e)):"Enter"!==e.code&&"Space"!==e.code||(e.preventDefault(),this.toggle()):(this.handleOptionsNavigation(e),this.handleOptionSelection(e),"Enter"!==e.code&&"Space"!==e.code||(e.preventDefault(),this.collapse()))}handleClickOutside(e){this.isOpen&&!this.contains(e.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let e=this.shadowRoot.querySelector("slot");e.addEventListener("slotchange",t=>{if(this.availableOptions=e.assignedElements(),this.availableOptions[0]){let e=this.availableOptions[0];this.previousOption=e,e.classList.add("check-selected"),this.value=e.getAttribute("value"),this.selectedOptionText.textContent=e.textContent,this.availableOptions.forEach(e=>{e.setAttribute("tabindex","0")})}}),this.addEventListener("click",this.handleClick),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)}attributeChangedCallback(e){"disabled"===e&&(this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"))}});const smOption=document.createElement("template");smOption.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}\n.option{\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    min-width: 100%;\n    padding: 0.8rem 1.2rem;\n    cursor: pointer;\n    overflow-wrap: break-word;\n    outline: none;\n    user-select: none;\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n.icon {\n    opacity: 0;\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-right: 0.5rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n:host(:focus) .option .icon{\n    opacity: 0.4\n}\n:host(.check-selected) .icon{\n    opacity: 1\n}\n@media (hover: hover){\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n    :host(:not(.check-selected):hover) .icon{\n        opacity: 0.4\n    }\n}\n</style>\n<div class="option">\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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>\n    <slot></slot> \n</div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option")}});
+const spinner=document.createElement("template");spinner.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    --accent-color: #4d2588;\n}\n.loader {\n    height: 1.6rem;\n    width: 1.6rem;\n    stroke-width: 8;\n    overflow: visible;\n    stroke: var(--accent-color);\n    fill: none;\n    stroke-dashoffset: 180;\n    stroke-dasharray: 180;\n    animation: load 2s infinite, spin 1s linear infinite;\n}\n@keyframes load {\n    50% {\n        stroke-dashoffset: 0;\n    }\n    100%{\n        stroke-dashoffset: -180;\n    }\n}\n\n@keyframes spin {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n</style>\n<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>\n\n';class SquareLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SquareLoader);
+const stripSelect=document.createElement("template");stripSelect.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        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --gap: 0.5rem;\n    }\n    .hide{\n        display: none !important;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: flex;\n        align-items: center;\n        padding: 1rem 0;\n    }\n    .strip-select{\n        position: relative;\n    }\n    :host([multiline]) .strip-select{\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n        overflow: auto hidden;\n    }\n    :host(:not([multiline])) .strip-select{\n        display: grid;\n        grid-auto-flow: column;\n        gap: var(--gap);\n        max-width: 100%;   \n        align-items: center;\n        overflow: auto hidden;\n    }\n    .nav-button{\n        display: flex;\n        top: 50%;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        position: absolute;\n        align-items: center;\n        background: rgba(var(--background-color), 1);\n        transform: translateY(-50%);\n    }\n    .nav-button--right{\n        right: 0;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n    }\n    .cover--left{\n        background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);\n    }\n    .cover--right{\n        right: 0;\n        background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.5rem;\n        width: 1.5rem;\n        fill: rgba(var(--text-color), .8);\n    }\n    @media (hover: none){\n        .nav-button{\n            display: none;\n        }\n        .strip-select{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .strip-select{\n            overflow: hidden;\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-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    <section class="strip-select">\n        <slot></slot>\n    </section>\n    <button class="nav-button nav-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="cover cover--right hide"></div>\n</section>\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions,this._value,this.scrollDistance,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),o=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",s=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(r.observe(t.assignedElements()[0]),a.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),o.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(o.classList.add("hide"),n.classList.add("hide")):(o.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),o.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.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        --border-radius: 2rem;\n        --background-color: inherit;\n        --active-option-color: inherit;\n        --active-option-backgroud-color: rgba(var(--text-color), .2);\n    }\n    .strip-option{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: 0.5rem 0.8rem;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 1px rgba(var(--text-color), .2) inset;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([active]) .strip-option{\n        color: var(--active-option-color);\n        background-color: var(--active-option-backgroud-color);\n    }\n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .strip-option{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    :host(:hover:not([active])) .strip-option{\n        background-color: rgba(var(--text-color), 0.06);\n    }\n</style>\n<label class="strip-option">\n    <slot></slot>\n</label>\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
+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 tagsInput=document.createElement("template");tagsInput.innerHTML='\n  <style>\n  *{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n  :host{\n\t--accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n\t--background: rgba(var(--text-color), 0.06);\n    }\n.hide{\n    display: none !important;\n}\n.tags-wrapper{\n    position: relative;\n    display: flex;\n    cursor: text;\n    flex-wrap: wrap;\n    justify-items: flex-start;\n    align-items: center;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    border-radius: var(--border-radius);\n    background: var(--background);\n  }\n  .tags-wrapper:focus-within{\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n  }\n  \n  .tag {\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    display: inline-flex;\n    border-radius: 0.3rem;\n    padding: 0.3rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: rgba(var(--text-color), 0.06);\n  }\n  \n  .icon {\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-left: 0.3rem;\n    fill: rgba(var(--text-color), 0.8);\n  }\n  \n  input,\n  input:focus {\n    outline: none;\n    border: none;\n  }\n  \n  input {\n    display: inline-flex;\n    width: auto;\n    color: inherit;\n    max-width: inherit;\n    font-size: inherit;\n    font-family: inherit;\n    padding: 0.4rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: transparent;\n  }\n  .placeholder{\n      position: absolute;\n      padding: 0 0.5rem;\n      top: 50%;\n      font-weight: 500;\n      transform: translateY(-50%);\n      color: rgba(var(--text-color), 0.6);\n  }\n  </style>\n  <div class="tags-wrapper">\n    <input type="text" size="3"/>\n    <p class="placeholder"></p>\n  </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key||"Space"===t.code){const e=t.target.value.trim();if(this.tags.has(e))this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const t=document.createElement("span");t.dataset.value=e,t.className="tag",t.innerHTML=`\n                        <span class="tag-text">${e}</span>\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                        `,this.input.before(t),this.tags.add(e)}if(t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===t.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
+const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n::-moz-focus-inner{\n    border: none;\n}\n.hide{\n    opacity: 0 !important;\n}\n:host{\n    display: grid;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n    --padding: initial;\n    --max-height: 8rem;\n}\n:host([variant="outlined"]) .textarea {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n.textarea{\n    display: grid;\n    position: relative;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    overflow: hidden auto;\n    grid-template-columns: 1fr;\n    align-items: stretch;\n    max-height: var(--max-height);\n    background: var(--background);\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n}\n.textarea::after,\ntextarea{\n    padding: 0.7rem 1rem;\n    width: 100%;\n    min-width: 1em;\n    font: inherit;\n    color: inherit;\n    resize: none;\n    grid-area: 2/1;\n    justify-self: stretch;\n    background: none;\n    appearance: none;\n    border: none;\n    outline: none;\n    line-height: 1.5;\n    overflow: hidden;\n}\n.textarea::after{\n    content: attr(data-value) \' \';\n    visibility: hidden;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    hyphens: auto;\n}\n.readonly{\n    pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.placeholder{\n    position: absolute;\n    margin: 0.7rem 1rem;\n    opacity: .7;\n    font-weight: 400;\n    font-size: 1rem;\n    line-height: 1.5;\n    pointer-events: none;\n    user-select: none;\n}\n:host([disabled]) .textarea{\n    cursor: not-allowed;\n    opacity: 0.6;\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 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}\n</style>\n<label class="textarea" part="textarea">\n    <span class="placeholder"></span>\n    <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
+const textField=document.createElement("template");textField.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    .text-field{\n        display: flex;\n        align-items: center;\n    }\n    .text{\n        padding: 0.6rem 0;\n        transition: background-color 0.3s;\n        border-bottom: 0.15rem solid transparent;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n    }\n    .text:focus{\n        outline: none;\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    .text:focus-visible{\n        outline: none;\n        background: solid rgba(var(--text-color), 0.06);\n    }\n    .editable{\n        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n    }\n    .icon-container{\n        position: relative;\n        margin-left: 0.5rem;\n        height: 1.8rem;\n        width: 1.8rem;\n    }\n    :host([disabled]) .icon-container{\n        display: none;\n    }\n    .icon{\n        position: absolute;\n        cursor: pointer;\n        height: 2rem;\n        width: 2rem;\n        padding: 0.3rem;\n        fill: rgba(var(--text-color), 1);\n    }\n    .hide{\n        display: none;\n    }\n</style>\n<div class="text-field">\n    <div class="text" part="text"></div>\n    <div tabindex="0" class="icon-container">\n        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n            <title>Edit</title>\n            <path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/>\n        </svg>\n        <svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n            <title>Save</title>\n            <path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>\n        </svg>\n    </div>\n</div>\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.saveButton=this.textField.querySelector(".save-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.classList.add("hide")}),setTimeout(()=>{this.saveButton.classList.remove("hide"),this.saveButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)),this.saveButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.saveButton.classList.add("hide")}),setTimeout(()=>{this.editButton.classList.remove("hide"),this.editButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1)}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,this.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable))}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable)}});
+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);
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index 758e628..ce1c67b 100644
--- a/components/index.html
+++ b/components/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SM Components</title>
+    <meta name="description" content="SM-Components. collection of web components">
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -53,7 +54,6 @@
             <h4>Components</h4>
             <ul id="components_list" class="list"></ul>
         </hamburger-menu>
-        <section id="backdrop" class="hide-completely" onclick="sideNav(false)"></section>
         <article class="right language-html">
             <section id="overview_page" class="page">
                 <div>
@@ -648,7 +648,7 @@
     navigationDrawerButton.addEventListner('click', e => {
         navigationDrawer.open(); // Will open hamburger menu on mobile devices when hidden  
     })
-    &lt;/script&gt;
+&lt;/script&gt;
 </code>
 </pre>
             </section>
@@ -1328,18 +1328,6 @@
                     </div>
                 </section>
             </section>
-            <section id="spinner_page" class="page hide-completely">
-                <h1 class="page__title">Spinner</h1>
-                <p>
-                    Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner
-                </p>
-                <sm-spinner></sm-spinner>
-                <pre>
-<code>
-&lt;sm-spinner&gt;&lt;/sm-spinner&gt;
-</code>
-</pre>
-            </section>
 
             <section id="strip_select_page" class="page hide-completely">
                 <h1 class="page__title">Strip select</h1>
@@ -1923,9 +1911,10 @@
         </sm-checkbox>
     </template>
     <script src="assets/prism.js"></script>
-    <script src="components.js"></script>
+    <script src="components.min.js"></script>
     <script id="default_ui_library">
         const domRefs = {};
+        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
 
         function getRef(elementId) {
             if (!domRefs.hasOwnProperty(elementId)) {
@@ -2218,6 +2207,7 @@
             else {
                 pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
             }
+            if(!appPages.includes(pageId)) return
             document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
             document.querySelector('.list__item--active').classList.remove('list__item--active')
             getRef(pageId).classList.remove('hide-completely')
diff --git a/components/index.min.html b/components/index.min.html
index 250ec32..e215225 100644
--- a/components/index.min.html
+++ b/components/index.min.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SM Components</title><link rel="stylesheet" href="css/main.min.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"></head><body class="hide-completely"><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><main><header id="main_header" class="flex align-center space-between"><button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()" aria-label="Hamburger menu toggle button"><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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></svg></button><h4>SM Components</h4><theme-toggle></theme-toggle></header><hamburger-menu id="side_nav"><h4>Getting Started</h4><ul class="list"><li><a href="#overview_page" class="list__item list__item--active interact">Overview</a></li><li><a href="#quick_start_page" class="list__item interact">Quick start</a></li><li><a href="#global_styling_page" class="list__item interact">Global styling</a></li></ul><h4>Components</h4><ul id="components_list" class="list"></ul></hamburger-menu><section id="backdrop" class="hide-completely" onclick="sideNav(false)"></section><article class="right language-html"><section id="overview_page" class="page"><div><h5 class="color-0-8 weight-500">Total components</h5><h1 id="total_components_count" class="h1"></h1></div><div><h1 class="page__title">Overview</h1><p>Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.</p><p>Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.</p><h3>Features</h3><ul class="grid gap-1"><li>Native and Cross framework support</li><li>Encapsulated style and functionality</li><li>Easy styling</li><li>Adaptive scaling</li></ul></div></section><section id="quick_start_page" class="page hide-completely"><h1 class="page__title">Quick Start</h1><ol><li>To start using these components, Select the ones you want to add to your project. You can un-check 'get minified' to get the readable code.</li><li>Now you can download or copy the source code for selected components. <strong class="important">You might get a warning while downloading like this file is not safe, please allow the download as this is caused when downloading files with '.js' extension. These components are 100% safe to use.</strong></li><li>Link the downloaded js before <span class="highlight">&lt;/body&gt;</span><pre>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SM Components</title><meta name="description" content="SM-Components. collection of web components"><link rel="stylesheet" href="css/main.min.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"></head><body class="hide-completely"><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><main><header id="main_header" class="flex align-center space-between"><button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()" aria-label="Hamburger menu toggle button"><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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></svg></button><h4>SM Components</h4><theme-toggle></theme-toggle></header><hamburger-menu id="side_nav"><h4>Getting Started</h4><ul class="list"><li><a href="#overview_page" class="list__item list__item--active interact">Overview</a></li><li><a href="#quick_start_page" class="list__item interact">Quick start</a></li><li><a href="#global_styling_page" class="list__item interact">Global styling</a></li></ul><h4>Components</h4><ul id="components_list" class="list"></ul></hamburger-menu><article class="right language-html"><section id="overview_page" class="page"><div><h5 class="color-0-8 weight-500">Total components</h5><h1 id="total_components_count" class="h1"></h1></div><div><h1 class="page__title">Overview</h1><p>Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.</p><p>Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.</p><h3>Features</h3><ul class="grid gap-1"><li>Native and Cross framework support</li><li>Encapsulated style and functionality</li><li>Easy styling</li><li>Adaptive scaling</li></ul></div></section><section id="quick_start_page" class="page hide-completely"><h1 class="page__title">Quick Start</h1><ol><li>To start using these components, Select the ones you want to add to your project. You can un-check 'get minified' to get the readable code.</li><li>Now you can download or copy the source code for selected components. <strong class="important">You might get a warning while downloading like this file is not safe, please allow the download as this is caused when downloading files with '.js' extension. These components are 100% safe to use.</strong></li><li>Link the downloaded js before <span class="highlight">&lt;/body&gt;</span><pre>
 <code>
 &lt;script src=".../components.js"&gt;&lt;/script&gt;
 </code>
@@ -57,7 +57,7 @@
     navigationDrawerButton.addEventListner('click', e => {
         navigationDrawer.open(); // Will open hamburger menu on mobile devices when hidden  
     })
-    &lt;/script&gt;
+&lt;/script&gt;
 </code>
 </pre></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
 <code>
@@ -186,11 +186,7 @@
     &lt;/div&gt;
 &lt;/sm-switch&gt;    
 </code>
-</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
-<code>
-&lt;sm-spinner&gt;&lt;/sm-spinner&gt;
-</code>
-</pre></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><strip-select id="sort_by"><strip-option value="relevance" selected>Relevance</strip-option><strip-option value="popularity">Popularity</strip-option><strip-option value="price">Price</strip-option><strip-option value="rating">Rating</strip-option></strip-select><pre>
+</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><strip-select id="sort_by"><strip-option value="relevance" selected>Relevance</strip-option><strip-option value="popularity">Popularity</strip-option><strip-option value="price">Price</strip-option><strip-option value="rating">Rating</strip-option></strip-select><pre>
 <code>
 &lt;strip-select id="sort_by"&gt;
     &lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
@@ -330,7 +326,8 @@
     })
 &lt;/script&gt;
 </code>
-</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="components.js"></script><script id="default_ui_library">const domRefs = {};
+</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="components.min.js"></script><script id="default_ui_library">const domRefs = {};
+        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
 
         function getRef(elementId) {
             if (!domRefs.hasOwnProperty(elementId)) {
@@ -620,6 +617,7 @@
             else {
                 pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
             }
+            if(!appPages.includes(pageId)) return
             document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
             document.querySelector('.list__item--active').classList.remove('list__item--active')
             getRef(pageId).classList.remove('hide-completely')