@namelivia/vue-components 4.6.0 → 4.8.0

package/dist/index.esm.js

@@ -1,9 +1,9 @@
-import { createElementBlock, openBlock, toDisplayString, createStaticVNode, ref, onMounted, createElementVNode, renderSlot, createCommentVNode, createVNode, withCtx, computed, normalizeClass, createBlock, Transition, Fragment, renderList, watch, withDirectives, vModelSelect } from 'vue';
+import { createElementBlock, openBlock, toDisplayString, createStaticVNode, ref, onMounted, createElementVNode, renderSlot, createCommentVNode, createVNode, withCtx, computed, normalizeClass, createBlock, Transition, Fragment, renderList, watch, withDirectives, vModelSelect, onBeforeUnmount } from 'vue';
 
-const _hoisted_1$x = { class: "section-title" };
+const _hoisted_1$y = { class: "section-title" };
 
 
-var script$B = {
+var script$C = {
   __name: 'SectionTitle',
   props: {
   text: {
@@ -16,7 +16,7 @@ var script$B = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("h1", _hoisted_1$x, toDisplayString(__props.text), 1 /* TEXT */))
+  return (openBlock(), createElementBlock("h1", _hoisted_1$y, toDisplayString(__props.text), 1 /* TEXT */))
 }
 }
 
@@ -49,13 +49,13 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$w = "\n.section-title[data-v-0375af86] {\n  text-align: center;\n  font-size: var(--font-size-xlarge);\n  line-height: 1.5;\n}\n";
-styleInject(css_248z$w);
+var css_248z$x = "\n.section-title[data-v-0375af86] {\n  text-align: center;\n  font-size: var(--font-size-xlarge);\n  line-height: 1.5;\n}\n";
+styleInject(css_248z$x);
 
-script$B.__scopeId = "data-v-0375af86";
-script$B.__file = "src/SectionTitle/SectionTitle.vue";
+script$C.__scopeId = "data-v-0375af86";
+script$C.__file = "src/SectionTitle/SectionTitle.vue";
 
-var script$A = {
+var script$B = {
   __name: 'Loading',
   props: {
   text: String,
@@ -73,16 +73,16 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$v = "\n.loading-text[data-v-7a9a3040] {\n  text-align: center;\n  font-size: var(--font-size-large);\n  line-height: 1.75rem;\n}\n.loading-balls-container[data-v-7a9a3040] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  animation: bounce-7a9a3040 1.5s infinite ease-in-out;\n}\n.loading-ball[data-v-7a9a3040] {\n  width: 2rem;\n  height: 2rem;\n  border-radius: var(--border-radius-round);\n}\n.loading-ball.blue[data-v-7a9a3040] {\n  background-color: var(--color-loading-ball-blue);\n}\n.loading-ball.green[data-v-7a9a3040] {\n  background-color: var(--color-loading-ball-green);\n}\n.loading-ball.red[data-v-7a9a3040] {\n  background-color: var(--color-loading-ball-red);\n}\n@keyframes bounce-7a9a3040 {\n0%, 100% {\n    transform: translateY(0);\n}\n50% {\n    transform: translateY(-1rem);\n}\n}\n";
-styleInject(css_248z$v);
+var css_248z$w = "\n.loading-text[data-v-7a9a3040] {\n  text-align: center;\n  font-size: var(--font-size-large);\n  line-height: 1.75rem;\n}\n.loading-balls-container[data-v-7a9a3040] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  animation: bounce-7a9a3040 1.5s infinite ease-in-out;\n}\n.loading-ball[data-v-7a9a3040] {\n  width: 2rem;\n  height: 2rem;\n  border-radius: var(--border-radius-round);\n}\n.loading-ball.blue[data-v-7a9a3040] {\n  background-color: var(--color-loading-ball-blue);\n}\n.loading-ball.green[data-v-7a9a3040] {\n  background-color: var(--color-loading-ball-green);\n}\n.loading-ball.red[data-v-7a9a3040] {\n  background-color: var(--color-loading-ball-red);\n}\n@keyframes bounce-7a9a3040 {\n0%, 100% {\n    transform: translateY(0);\n}\n50% {\n    transform: translateY(-1rem);\n}\n}\n";
+styleInject(css_248z$w);
 
-script$A.__scopeId = "data-v-7a9a3040";
-script$A.__file = "src/Loading/Loading.vue";
+script$B.__scopeId = "data-v-7a9a3040";
+script$B.__file = "src/Loading/Loading.vue";
 
-const _hoisted_1$w = ["src", "alt"];
+const _hoisted_1$x = ["src", "alt"];
 
 
-var script$z = {
+var script$A = {
   __name: 'CardImage',
   props: {
   src: String,
@@ -108,24 +108,24 @@ return (_ctx, _cache) => {
     alt: __props.alt,
     ref_key: "image",
     ref: image
-  }, null, 8 /* PROPS */, _hoisted_1$w))
+  }, null, 8 /* PROPS */, _hoisted_1$x))
 }
 }
 
 };
 
-var css_248z$u = "\nimg[data-v-5fa6a3f6] {\n      width: 100%;\n}\n";
-styleInject(css_248z$u);
+var css_248z$v = "\nimg[data-v-5fa6a3f6] {\n      width: 100%;\n}\n";
+styleInject(css_248z$v);
 
-script$z.__scopeId = "data-v-5fa6a3f6";
-script$z.__file = "src/Card/CardImage.vue";
+script$A.__scopeId = "data-v-5fa6a3f6";
+script$A.__file = "src/Card/CardImage.vue";
 
-const _hoisted_1$v = { class: "card-body" };
+const _hoisted_1$w = { class: "card-body" };
 const _hoisted_2$g = { class: "card-title" };
 const _hoisted_3$a = { class: "card-text" };
 
 
-var script$y = {
+var script$z = {
   __name: 'CardBody',
   props: {
   title: String,
@@ -135,7 +135,7 @@ var script$y = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$v, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$w, [
     createElementVNode("div", _hoisted_2$g, toDisplayString(__props.title), 1 /* TEXT */),
     createElementVNode("p", _hoisted_3$a, [
       renderSlot(_ctx.$slots, "default")
@@ -146,20 +146,20 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$t = "\n.card-body[data-v-c140cd30] {\n  padding: var(--card-body-padding);\n}\n.card-title[data-v-c140cd30] {\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-large);\n  margin-bottom: var(--card-title-margin-bottom);\n}\n.card-text[data-v-c140cd30] {\n  color: var(--color-card-text);\n  font-size: var(--font-size-base);\n}\n";
-styleInject(css_248z$t);
+var css_248z$u = "\n.card-body[data-v-c140cd30] {\n  padding: var(--card-body-padding);\n}\n.card-title[data-v-c140cd30] {\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-large);\n  margin-bottom: var(--card-title-margin-bottom);\n}\n.card-text[data-v-c140cd30] {\n  color: var(--color-card-text);\n  font-size: var(--font-size-base);\n}\n";
+styleInject(css_248z$u);
 
-script$y.__scopeId = "data-v-c140cd30";
-script$y.__file = "src/Card/CardBody.vue";
+script$z.__scopeId = "data-v-c140cd30";
+script$z.__file = "src/Card/CardBody.vue";
 
-const _hoisted_1$u = {
+const _hoisted_1$v = {
   key: 0,
   class: "card-container"
 };
 const _hoisted_2$f = { class: "card" };
 
 
-var script$x = {
+var script$y = {
   __name: 'Card',
   props: {
   image: String,
@@ -178,14 +178,14 @@ var script$x = {
 
 return (_ctx, _cache) => {
   return (!__props.dismissed)
-    ? (openBlock(), createElementBlock("div", _hoisted_1$u, [
+    ? (openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("div", _hoisted_2$f, [
-          createVNode(script$z, {
+          createVNode(script$A, {
             src: __props.image,
             alt: __props.title,
             onWidth: _cache[0] || (_cache[0] = $event => (_ctx.$emit('width', $event)))
           }, null, 8 /* PROPS */, ["src", "alt"]),
-          createVNode(script$y, { title: __props.title }, {
+          createVNode(script$z, { title: __props.title }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
             ]),
@@ -199,23 +199,23 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$s = "\n.card-container[data-v-da3858b4] {\n  margin: var(--card-margin);\n}\n.card[data-v-da3858b4] {\n  max-width: var(--card-max-width);\n  border-radius: var(--border-radius-big);\n  overflow: hidden;\n  box-shadow: var(--card-shadow);\n}\n";
-styleInject(css_248z$s);
+var css_248z$t = "\n.card-container[data-v-da3858b4] {\n  margin: var(--card-margin);\n}\n.card[data-v-da3858b4] {\n  max-width: var(--card-max-width);\n  border-radius: var(--border-radius-big);\n  overflow: hidden;\n  box-shadow: var(--card-shadow);\n}\n";
+styleInject(css_248z$t);
 
-script$x.__scopeId = "data-v-da3858b4";
-script$x.__file = "src/Card/Card.vue";
+script$y.__scopeId = "data-v-da3858b4";
+script$y.__file = "src/Card/Card.vue";
 
-const _hoisted_1$t = { class: "card-grid" };
+const _hoisted_1$u = { class: "card-grid" };
 
 
-var script$w = {
+var script$x = {
   __name: 'CardGrid',
   setup(__props) {
 
 // No logic needed
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$t, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$u, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -223,23 +223,23 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$r = "\n.card-grid[data-v-ad060034] {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n}\n@media (min-width: 1024px) {\n.card-grid[data-v-ad060034] {\n    justify-content: space-between;\n}\n}\n";
-styleInject(css_248z$r);
+var css_248z$s = "\n.card-grid[data-v-ad060034] {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n}\n@media (min-width: 1024px) {\n.card-grid[data-v-ad060034] {\n    justify-content: space-between;\n}\n}\n";
+styleInject(css_248z$s);
 
-script$w.__scopeId = "data-v-ad060034";
-script$w.__file = "src/CardGrid/CardGrid.vue";
+script$x.__scopeId = "data-v-ad060034";
+script$x.__file = "src/CardGrid/CardGrid.vue";
 
-const _hoisted_1$s = { class: "container" };
+const _hoisted_1$t = { class: "container" };
 
 
-var script$v = {
+var script$w = {
   __name: 'Container',
   setup(__props) {
 
 // No logic needed
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$s, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$t, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -247,15 +247,15 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$q = "\n.container[data-v-7cccf06a] {\n  max-width: var(--container-max-width);\n  margin: var(--container-margin);\n}\n";
-styleInject(css_248z$q);
+var css_248z$r = "\n.container[data-v-7cccf06a] {\n  max-width: var(--container-max-width);\n  margin: var(--container-margin);\n}\n";
+styleInject(css_248z$r);
 
-script$v.__scopeId = "data-v-7cccf06a";
-script$v.__file = "src/Container/Container.vue";
+script$w.__scopeId = "data-v-7cccf06a";
+script$w.__file = "src/Container/Container.vue";
 
-const _hoisted_1$r = ["href"];
+const _hoisted_1$s = ["href"];
 
-var script$u = {
+var script$v = {
   __name: 'MobileNavigationLink',
   props: {
   text: String,
@@ -273,25 +273,25 @@ return (_ctx, _cache) => {
     href: linkDestination.value,
     class: normalizeClass(linkClass.value),
     "aria-current": "page"
-  }, toDisplayString(__props.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$r))
+  }, toDisplayString(__props.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$s))
 }
 }
 
 };
 
-var css_248z$p = "\n.current-link[data-v-3e279546] {\n  background-color: var(--color-navbar-current-background);\n  color: var(--color-navbar-text);\n  display: block;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  text-decoration: none;\n  cursor: default;\n}\n.regular-link[data-v-3e279546] {\n  color: var(--color-navbar-text);\n  display: block;\n  padding: 0.5rem 0.75rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  transition: background-color 0.2s ease, color 0.2s ease;\n  text-decoration: none;\n}\n.regular-link[data-v-3e279546]:hover {\n  background-color: var(--color-navbar-link-background);\n}\n";
-styleInject(css_248z$p);
+var css_248z$q = "\n.current-link[data-v-3e279546] {\n  background-color: var(--color-navbar-current-background);\n  color: var(--color-navbar-text);\n  display: block;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  text-decoration: none;\n  cursor: default;\n}\n.regular-link[data-v-3e279546] {\n  color: var(--color-navbar-text);\n  display: block;\n  padding: 0.5rem 0.75rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  transition: background-color 0.2s ease, color 0.2s ease;\n  text-decoration: none;\n}\n.regular-link[data-v-3e279546]:hover {\n  background-color: var(--color-navbar-link-background);\n}\n";
+styleInject(css_248z$q);
 
-script$u.__scopeId = "data-v-3e279546";
-script$u.__file = "src/Navbar/MobileNavigationLink.vue";
+script$v.__scopeId = "data-v-3e279546";
+script$v.__file = "src/Navbar/MobileNavigationLink.vue";
 
-const _hoisted_1$q = {
+const _hoisted_1$r = {
   key: 0,
   id: "mobile-menu"
 };
 const _hoisted_2$e = { class: "menu-panel" };
 
-var script$t = {
+var script$u = {
   __name: 'MobileNavigationLinks',
   props: {
   links: Array,
@@ -312,10 +312,10 @@ return (_ctx, _cache) => {
   }, {
     default: withCtx(() => [
       (__props.open)
-        ? (openBlock(), createElementBlock("div", _hoisted_1$q, [
+        ? (openBlock(), createElementBlock("div", _hoisted_1$r, [
             createElementVNode("div", _hoisted_2$e, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
-                return (openBlock(), createBlock(script$u, {
+                return (openBlock(), createBlock(script$v, {
                   key: link.id,
                   href: link.href,
                   text: link.text,
@@ -333,15 +333,15 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$o = "\n.fade-scale-enter-active[data-v-eb1296c6],\n.fade-scale-leave-active[data-v-eb1296c6] {\n  transition: all 200ms ease;\n}\n.fade-scale-enter-from[data-v-eb1296c6],\n.fade-scale-leave-to[data-v-eb1296c6] {\n  transform: scaleY(0);\n  transform-origin: top;\n}\n.fade-scale-enter-to[data-v-eb1296c6],\n.fade-scale-leave-from[data-v-eb1296c6] {\n  transform: scaleY(1);\n  transform-origin: top;\n}\n#mobile-menu[data-v-eb1296c6] {\n  display: block;\n}\n.menu-panel[data-v-eb1296c6] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  background-color: var(--color-navbar-background);\n}\n@media (min-width: 640px) {\n#mobile-menu[data-v-eb1296c6] {\n    display: none;\n}\n}\n";
-styleInject(css_248z$o);
+var css_248z$p = "\n.fade-scale-enter-active[data-v-eb1296c6],\n.fade-scale-leave-active[data-v-eb1296c6] {\n  transition: all 200ms ease;\n}\n.fade-scale-enter-from[data-v-eb1296c6],\n.fade-scale-leave-to[data-v-eb1296c6] {\n  transform: scaleY(0);\n  transform-origin: top;\n}\n.fade-scale-enter-to[data-v-eb1296c6],\n.fade-scale-leave-from[data-v-eb1296c6] {\n  transform: scaleY(1);\n  transform-origin: top;\n}\n#mobile-menu[data-v-eb1296c6] {\n  display: block;\n}\n.menu-panel[data-v-eb1296c6] {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  background-color: var(--color-navbar-background);\n}\n@media (min-width: 640px) {\n#mobile-menu[data-v-eb1296c6] {\n    display: none;\n}\n}\n";
+styleInject(css_248z$p);
 
-script$t.__scopeId = "data-v-eb1296c6";
-script$t.__file = "src/Navbar/MobileNavigationLinks.vue";
+script$u.__scopeId = "data-v-eb1296c6";
+script$u.__file = "src/Navbar/MobileNavigationLinks.vue";
 
-const _hoisted_1$p = ["href"];
+const _hoisted_1$q = ["href"];
 
-var script$s = {
+var script$t = {
   __name: 'NavigationLink',
   props: {
   text: String,
@@ -359,22 +359,22 @@ return (_ctx, _cache) => {
     href: linkDestination.value,
     class: normalizeClass(linkClass.value),
     "aria-current": "page"
-  }, toDisplayString(__props.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$p))
+  }, toDisplayString(__props.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$q))
 }
 }
 
 };
 
-var css_248z$n = "\n.current-link[data-v-4989b384] {\n  background-color: var(--color-navbar-current-background);\n  color: var(--color-navbar-text);\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  text-decoration: none;\n  cursor: default;\n}\n.regular-link[data-v-4989b384] {\n  color: var(--color-navbar-text);\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  transition: background-color 0.2s ease, color 0.2s ease;\n  text-decoration: none;\n}\n.regular-link[data-v-4989b384]:hover {\n  background-color: var(--color-navbar-link-background);\n}\n";
-styleInject(css_248z$n);
+var css_248z$o = "\n.current-link[data-v-4989b384] {\n  background-color: var(--color-navbar-current-background);\n  color: var(--color-navbar-text);\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  text-decoration: none;\n  cursor: default;\n}\n.regular-link[data-v-4989b384] {\n  color: var(--color-navbar-text);\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  border-radius: 0.375rem;\n  font-size: var(--font-size-navbar);\n  transition: background-color 0.2s ease, color 0.2s ease;\n  text-decoration: none;\n}\n.regular-link[data-v-4989b384]:hover {\n  background-color: var(--color-navbar-link-background);\n}\n";
+styleInject(css_248z$o);
 
-script$s.__scopeId = "data-v-4989b384";
-script$s.__file = "src/Navbar/NavigationLink.vue";
+script$t.__scopeId = "data-v-4989b384";
+script$t.__file = "src/Navbar/NavigationLink.vue";
 
-const _hoisted_1$o = { class: "links-container" };
+const _hoisted_1$p = { class: "links-container" };
 const _hoisted_2$d = { class: "links-wrapper" };
 
-var script$r = {
+var script$s = {
   __name: 'NavigationLinks',
   props: {
   links: Array,
@@ -384,10 +384,10 @@ var script$r = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$o, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$p, [
     createElementVNode("div", _hoisted_2$d, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
-        return (openBlock(), createBlock(script$s, {
+        return (openBlock(), createBlock(script$t, {
           key: link.id,
           href: link.href,
           text: link.text,
@@ -401,18 +401,18 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$m = "\n.links-container[data-v-294f43c2] {\n  display: none;\n}\n.links-wrapper[data-v-294f43c2] {\n  display: flex;\n  gap: 1rem;\n}\n@media (min-width: 640px) {\n.links-container[data-v-294f43c2] {\n    display: block;\n    margin-left: 1.5rem;\n}\n}\n";
-styleInject(css_248z$m);
+var css_248z$n = "\n.links-container[data-v-294f43c2] {\n  display: none;\n}\n.links-wrapper[data-v-294f43c2] {\n  display: flex;\n  gap: 1rem;\n}\n@media (min-width: 640px) {\n.links-container[data-v-294f43c2] {\n    display: block;\n    margin-left: 1.5rem;\n}\n}\n";
+styleInject(css_248z$n);
 
-script$r.__scopeId = "data-v-294f43c2";
-script$r.__file = "src/Navbar/NavigationLinks.vue";
+script$s.__scopeId = "data-v-294f43c2";
+script$s.__file = "src/Navbar/NavigationLinks.vue";
 
-const _hoisted_1$n = ["href"];
+const _hoisted_1$o = ["href"];
 const _hoisted_2$c = ["src", "alt"];
 const _hoisted_3$9 = ["src", "alt"];
 
 
-var script$q = {
+var script$r = {
   __name: 'NavbarTitle',
   props: {
   href: String,
@@ -439,22 +439,22 @@ return (_ctx, _cache) => {
       src: __props.imageBig,
       alt: __props.title
     }, null, 8 /* PROPS */, _hoisted_3$9)
-  ], 8 /* PROPS */, _hoisted_1$n))
+  ], 8 /* PROPS */, _hoisted_1$o))
 }
 }
 
 };
 
-var css_248z$l = "\n.title-container[data-v-661ef87c] {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n.logo-small[data-v-661ef87c] {\n  display: block;\n  height: 2rem;\n  width: auto;\n}\n.logo-big[data-v-661ef87c] {\n  display: none;\n  height: 2rem;\n  width: auto;\n}\n@media (min-width: 1024px) {\n.logo-small[data-v-661ef87c] {\n    display: none;\n}\n.logo-big[data-v-661ef87c] {\n    display: block;\n}\n}\n\n\n";
-styleInject(css_248z$l);
+var css_248z$m = "\n.title-container[data-v-661ef87c] {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n.logo-small[data-v-661ef87c] {\n  display: block;\n  height: 2rem;\n  width: auto;\n}\n.logo-big[data-v-661ef87c] {\n  display: none;\n  height: 2rem;\n  width: auto;\n}\n@media (min-width: 1024px) {\n.logo-small[data-v-661ef87c] {\n    display: none;\n}\n.logo-big[data-v-661ef87c] {\n    display: block;\n}\n}\n\n\n";
+styleInject(css_248z$m);
 
-script$q.__scopeId = "data-v-661ef87c";
-script$q.__file = "src/Navbar/NavbarTitle.vue";
+script$r.__scopeId = "data-v-661ef87c";
+script$r.__file = "src/Navbar/NavbarTitle.vue";
 
-const _hoisted_1$m = { class: "action-container" };
+const _hoisted_1$n = { class: "action-container" };
 const _hoisted_2$b = ["src", "alt"];
 
-var script$p = {
+var script$q = {
   __name: 'RightContent',
   props: {
   locale: String,
@@ -468,7 +468,7 @@ const props = __props;
 const avatarAlt = computed(() => `${props.currentUserName} (${props.currentUserEmail})`);
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$m, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$n, [
     createElementVNode("img", {
       class: "circle-image",
       src: __props.currentUserPicture,
@@ -480,13 +480,13 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$k = "\n.action-container[data-v-07675a13] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding-right: 0.5rem;\n  color: var(--color-navbar-text);\n  font-size: var(--font-size-navbar);\n}\n.circle-image[data-v-07675a13] {\n  border-radius: 9999px;\n  padding: 0.25rem;\n  height: 50px;\n  width: 50px;\n}\n@media (min-width: 640px) {\n.action-container[data-v-07675a13] {\n    position: static;\n    top: auto;\n    bottom: auto;\n    right: auto;\n    margin-left: 1.5rem;\n    padding-right: 0;\n}\n}\n\n";
-styleInject(css_248z$k);
+var css_248z$l = "\n.action-container[data-v-07675a13] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding-right: 0.5rem;\n  color: var(--color-navbar-text);\n  font-size: var(--font-size-navbar);\n}\n.circle-image[data-v-07675a13] {\n  border-radius: 9999px;\n  padding: 0.25rem;\n  height: 50px;\n  width: 50px;\n}\n@media (min-width: 640px) {\n.action-container[data-v-07675a13] {\n    position: static;\n    top: auto;\n    bottom: auto;\n    right: auto;\n    margin-left: 1.5rem;\n    padding-right: 0;\n}\n}\n\n";
+styleInject(css_248z$l);
 
-script$p.__scopeId = "data-v-07675a13";
-script$p.__file = "src/Navbar/RightContent.vue";
+script$q.__scopeId = "data-v-07675a13";
+script$q.__file = "src/Navbar/RightContent.vue";
 
-var script$o = {
+var script$p = {
   __name: 'MobileMenuButton',
   props: {
   open: { type: Boolean, default: false },
@@ -524,20 +524,20 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$j = "\n.menu-button[data-v-397545ee] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  border-radius: var(--border-radius-big);\n  color: var(--color-navbar-text);\n  background-color: transparent;\n  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n  border: none;\n  cursor: pointer;\n}\n.menu-icon[data-v-397545ee] {\n  display: block;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n";
-styleInject(css_248z$j);
+var css_248z$k = "\n.menu-button[data-v-397545ee] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem;\n  border-radius: var(--border-radius-big);\n  color: var(--color-navbar-text);\n  background-color: transparent;\n  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n  border: none;\n  cursor: pointer;\n}\n.menu-icon[data-v-397545ee] {\n  display: block;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n";
+styleInject(css_248z$k);
 
-script$o.__scopeId = "data-v-397545ee";
-script$o.__file = "src/Navbar/MobileMenuButton.vue";
+script$p.__scopeId = "data-v-397545ee";
+script$p.__file = "src/Navbar/MobileMenuButton.vue";
 
-const _hoisted_1$l = { class: "navbar" };
+const _hoisted_1$m = { class: "navbar" };
 const _hoisted_2$a = { class: "navbar-container" };
 const _hoisted_3$8 = { class: "flex-header" };
 const _hoisted_4$3 = { class: "menu-toggle" };
 const _hoisted_5$2 = { class: "title-container" };
 
 
-var script$n = {
+var script$o = {
   __name: 'Navbar',
   props: {
   links: Array,
@@ -559,25 +559,25 @@ const onMobileMenuClick = () => {
 };
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("nav", _hoisted_1$l, [
+  return (openBlock(), createElementBlock("nav", _hoisted_1$m, [
     createElementVNode("div", _hoisted_2$a, [
       createElementVNode("div", _hoisted_3$8, [
         createElementVNode("div", _hoisted_4$3, [
-          createVNode(script$o, {
+          createVNode(script$p, {
             onClick: onMobileMenuClick,
             open: mobileMenuOpen.value
           }, null, 8 /* PROPS */, ["open"])
         ]),
         createElementVNode("div", _hoisted_5$2, [
-          createVNode(script$q, {
+          createVNode(script$r, {
             href: "/",
             title: __props.title,
             imageBig: __props.imageBig,
             imageSmall: __props.imageSmall
           }, null, 8 /* PROPS */, ["title", "imageBig", "imageSmall"]),
-          createVNode(script$r, { links: __props.links }, null, 8 /* PROPS */, ["links"])
+          createVNode(script$s, { links: __props.links }, null, 8 /* PROPS */, ["links"])
         ]),
-        createVNode(script$p, {
+        createVNode(script$q, {
           locale: __props.locale,
           "current-user-email": __props.currentUserEmail,
           "current-user-name": __props.currentUserName,
@@ -585,7 +585,7 @@ return (_ctx, _cache) => {
         }, null, 8 /* PROPS */, ["locale", "current-user-email", "current-user-name", "current-user-picture"])
       ])
     ]),
-    createVNode(script$t, {
+    createVNode(script$u, {
       links: __props.links,
       open: mobileMenuOpen.value
     }, null, 8 /* PROPS */, ["links", "open"])
@@ -595,23 +595,23 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$i = "\n.navbar[data-v-1b5caf34] {\n  background-color: var(--color-navbar-background);\n}\n.navbar-container[data-v-1b5caf34] {\n  max-width: 80rem;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.flex-header[data-v-1b5caf34] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 4rem;\n}\n.menu-toggle[data-v-1b5caf34] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n}\n.title-container[data-v-1b5caf34] {\n  flex: 1 1 0%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n@media (min-width: 640px) {\n.navbar-container[data-v-1b5caf34] {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n}\n.menu-toggle[data-v-1b5caf34] {\n    display: none;\n}\n.title-container[data-v-1b5caf34] {\n    align-items: stretch;\n    justify-content: flex-start;\n}\n}\n@media (min-width: 1024px) {\n.navbar-container[data-v-1b5caf34] {\n    padding-left: 2rem;\n    padding-right: 2rem;\n}\n}\n";
-styleInject(css_248z$i);
+var css_248z$j = "\n.navbar[data-v-1b5caf34] {\n  background-color: var(--color-navbar-background);\n}\n.navbar-container[data-v-1b5caf34] {\n  max-width: 80rem;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.flex-header[data-v-1b5caf34] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 4rem;\n}\n.menu-toggle[data-v-1b5caf34] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n}\n.title-container[data-v-1b5caf34] {\n  flex: 1 1 0%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n@media (min-width: 640px) {\n.navbar-container[data-v-1b5caf34] {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n}\n.menu-toggle[data-v-1b5caf34] {\n    display: none;\n}\n.title-container[data-v-1b5caf34] {\n    align-items: stretch;\n    justify-content: flex-start;\n}\n}\n@media (min-width: 1024px) {\n.navbar-container[data-v-1b5caf34] {\n    padding-left: 2rem;\n    padding-right: 2rem;\n}\n}\n";
+styleInject(css_248z$j);
 
-script$n.__scopeId = "data-v-1b5caf34";
-script$n.__file = "src/Navbar/Navbar.vue";
+script$o.__scopeId = "data-v-1b5caf34";
+script$o.__file = "src/Navbar/Navbar.vue";
 
-const _hoisted_1$k = { class: "styled-table" };
+const _hoisted_1$l = { class: "styled-table" };
 
 
-var script$m = {
+var script$n = {
   __name: 'StyledTable',
   setup(__props) {
 
 // No logic needed
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("table", _hoisted_1$k, [
+  return (openBlock(), createElementBlock("table", _hoisted_1$l, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -619,16 +619,16 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$h = "\n.styled-table[data-v-8e6b2044] {\n  width: 100%;\n  border-collapse: collapse;\n}\n";
-styleInject(css_248z$h);
+var css_248z$i = "\n.styled-table[data-v-8e6b2044] {\n  width: 100%;\n  border-collapse: collapse;\n}\n";
+styleInject(css_248z$i);
 
-script$m.__scopeId = "data-v-8e6b2044";
-script$m.__file = "src/StyledTable/StyledTable.vue";
+script$n.__scopeId = "data-v-8e6b2044";
+script$n.__file = "src/StyledTable/StyledTable.vue";
 
-const _hoisted_1$j = ["disabled"];
+const _hoisted_1$k = ["disabled"];
 
 
-var script$l = {
+var script$m = {
   __name: 'RegularButton',
   props: {
   text: String,
@@ -664,24 +664,24 @@ return (_ctx, _cache) => {
     onClick: onClick,
     class: normalizeClass(cssClass.value),
     disabled: __props.loading
-  }, toDisplayString(__props.loading ? __props.textWhileLoading : __props.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$j))
+  }, toDisplayString(__props.loading ? __props.textWhileLoading : __props.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$k))
 }
 }
 
 };
 
-var css_248z$g = "\n.regular-button[data-v-7c962c54] {\n  background-color: var(--color-regular);\n  color: var(--color-regular-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.regular-button[data-v-7c962c54]:hover {\n  background-color: var(--color-regular-hover);\n}\n\n/* Loading state */\n.loading[data-v-7c962c54] {\n  background-color: var(--color-regular-disabled);\n  cursor: wait;\n}\n.loading[data-v-7c962c54]:hover {\n  background-color: var(--color-regular-disabled);\n}\n";
-styleInject(css_248z$g);
+var css_248z$h = "\n.regular-button[data-v-7c962c54] {\n  background-color: var(--color-regular);\n  color: var(--color-regular-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.regular-button[data-v-7c962c54]:hover {\n  background-color: var(--color-regular-hover);\n}\n\n/* Loading state */\n.loading[data-v-7c962c54] {\n  background-color: var(--color-regular-disabled);\n  cursor: wait;\n}\n.loading[data-v-7c962c54]:hover {\n  background-color: var(--color-regular-disabled);\n}\n";
+styleInject(css_248z$h);
 
-script$l.__scopeId = "data-v-7c962c54";
-script$l.__file = "src/Buttons/RegularButton/RegularButton.vue";
+script$m.__scopeId = "data-v-7c962c54";
+script$m.__file = "src/Buttons/RegularButton/RegularButton.vue";
 
-const _hoisted_1$i = { class: "pagination-container" };
+const _hoisted_1$j = { class: "pagination-container" };
 const _hoisted_2$9 = ["href"];
 const _hoisted_3$7 = ["href"];
 
 
-var script$k = {
+var script$l = {
   __name: 'Pagination',
   props: {
   previousLabel: String,
@@ -695,17 +695,17 @@ var script$k = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$i, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$j, [
     (__props.showPrevious)
       ? (openBlock(), createElementBlock("a", {
           key: 0,
           href: __props.previousLink
         }, [
-          createVNode(script$l, { text: __props.previousLabel }, null, 8 /* PROPS */, ["text"])
+          createVNode(script$m, { text: __props.previousLabel }, null, 8 /* PROPS */, ["text"])
         ], 8 /* PROPS */, _hoisted_2$9))
       : createCommentVNode("v-if", true),
     createElementVNode("a", { href: __props.nextLink }, [
-      createVNode(script$l, { text: __props.nextLabel }, null, 8 /* PROPS */, ["text"])
+      createVNode(script$m, { text: __props.nextLabel }, null, 8 /* PROPS */, ["text"])
     ], 8 /* PROPS */, _hoisted_3$7)
   ]))
 }
@@ -713,16 +713,16 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$f = "\n.pagination-container[data-v-265c87a6] {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 1rem;\n}\na[data-v-265c87a6] {\n  text-decoration: none;\n}\n";
-styleInject(css_248z$f);
+var css_248z$g = "\n.pagination-container[data-v-265c87a6] {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 1rem;\n}\na[data-v-265c87a6] {\n  text-decoration: none;\n}\n";
+styleInject(css_248z$g);
 
-script$k.__scopeId = "data-v-265c87a6";
-script$k.__file = "src/Pagination/Pagination.vue";
+script$l.__scopeId = "data-v-265c87a6";
+script$l.__file = "src/Pagination/Pagination.vue";
 
-const _hoisted_1$h = { class: "badge" };
+const _hoisted_1$i = { class: "badge" };
 
 
-var script$j = {
+var script$k = {
   __name: 'Badge',
   props: {
   text: String,
@@ -732,26 +732,26 @@ var script$j = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("span", _hoisted_1$h, toDisplayString(__props.text), 1 /* TEXT */))
+  return (openBlock(), createElementBlock("span", _hoisted_1$i, toDisplayString(__props.text), 1 /* TEXT */))
 }
 }
 
 };
 
-var css_248z$e = "\n.badge[data-v-187659a4] {\n  background-color: var(--color-badge);\n  color: var(--color-badge-text);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-right: var(--badge-margin-right);\n  padding: var(--badge-padding);\n  border-radius: var(--badge-border-radius);\n  display: inline-block;\n}\n.dark .badge[data-v-187659a4] {\n  background-color: var(--color-badge-dark);\n  color: var(--color-badge-dark-text);\n}\n";
-styleInject(css_248z$e);
+var css_248z$f = "\n.badge[data-v-187659a4] {\n  background-color: var(--color-badge);\n  color: var(--color-badge-text);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-right: var(--badge-margin-right);\n  padding: var(--badge-padding);\n  border-radius: var(--badge-border-radius);\n  display: inline-block;\n}\n.dark .badge[data-v-187659a4] {\n  background-color: var(--color-badge-dark);\n  color: var(--color-badge-dark-text);\n}\n";
+styleInject(css_248z$f);
 
-script$j.__scopeId = "data-v-187659a4";
-script$j.__file = "src/Badge/Badge.vue";
+script$k.__scopeId = "data-v-187659a4";
+script$k.__file = "src/Badge/Badge.vue";
 
-const _hoisted_1$g = { class: "wrapper" };
+const _hoisted_1$h = { class: "wrapper" };
 const _hoisted_2$8 = { class: "title" };
 const _hoisted_3$6 = { class: "avg" };
 const _hoisted_4$2 = { class: "minmax" };
 const _hoisted_5$1 = { class: "min" };
 const _hoisted_6 = { class: "max" };
 
-var script$i = {
+var script$j = {
   __name: 'Temperature',
   props: {
   title: String,
@@ -767,7 +767,7 @@ const avgFormatted = computed(() => props.avg.toFixed(2));
 const maxFormatted = computed(() => props.max.toFixed(2));
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$g, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$h, [
     createElementVNode("div", _hoisted_2$8, toDisplayString(__props.title), 1 /* TEXT */),
     createElementVNode("div", _hoisted_3$6, toDisplayString(avgFormatted.value) + " ℃", 1 /* TEXT */),
     createElementVNode("div", _hoisted_4$2, [
@@ -781,13 +781,13 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$d = "\n.wrapper[data-v-4250e6d0] {\n    flex-direction: column;\n    display: inline-flex;\n}\n.avg[data-v-4250e6d0] {\n    display: flex;\n    font-size: var(--font-size-xlarge);\n    justify-content: center;\n}\n.title[data-v-4250e6d0] {\n    display: flex;\n    font-size: var(--font-size-base);\n    justify-content: center;\n}\n.minmax[data-v-4250e6d0] {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    font-size: var(--font-size-base);\n}\n";
-styleInject(css_248z$d);
+var css_248z$e = "\n.wrapper[data-v-4250e6d0] {\n    flex-direction: column;\n    display: inline-flex;\n}\n.avg[data-v-4250e6d0] {\n    display: flex;\n    font-size: var(--font-size-xlarge);\n    justify-content: center;\n}\n.title[data-v-4250e6d0] {\n    display: flex;\n    font-size: var(--font-size-base);\n    justify-content: center;\n}\n.minmax[data-v-4250e6d0] {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    font-size: var(--font-size-base);\n}\n";
+styleInject(css_248z$e);
 
-script$i.__scopeId = "data-v-4250e6d0";
-script$i.__file = "src/Temperature/Temperature.vue";
+script$j.__scopeId = "data-v-4250e6d0";
+script$j.__file = "src/Temperature/Temperature.vue";
 
-var script$h = {
+var script$i = {
   __name: 'SecondaryButton',
   props: {
   text: String,
@@ -809,13 +809,13 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$c = "\n.secondary-button[data-v-5bb3ed46] {\n  background-color: var(--color-secondary);\n  color: var(--color-secondary-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.secondary-button[data-v-5bb3ed46]:hover {\n  background-color: var(--color-secondary-hover);\n}\n";
-styleInject(css_248z$c);
+var css_248z$d = "\n.secondary-button[data-v-5bb3ed46] {\n  background-color: var(--color-secondary);\n  color: var(--color-secondary-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.secondary-button[data-v-5bb3ed46]:hover {\n  background-color: var(--color-secondary-hover);\n}\n";
+styleInject(css_248z$d);
 
-script$h.__scopeId = "data-v-5bb3ed46";
-script$h.__file = "src/Buttons/SecondaryButton/SecondaryButton.vue";
+script$i.__scopeId = "data-v-5bb3ed46";
+script$i.__file = "src/Buttons/SecondaryButton/SecondaryButton.vue";
 
-var script$g = {
+var script$h = {
   __name: 'DangerButton',
   props: {
   text: String,
@@ -837,20 +837,20 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$b = "\n.danger-button[data-v-5e080598] {\n  background-color: var(--color-danger);\n  color: var(--color-danger-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.danger-button[data-v-5e080598]:hover {\n  background-color: var(--color-danger-hover);\n}\n";
-styleInject(css_248z$b);
+var css_248z$c = "\n.danger-button[data-v-5e080598] {\n  background-color: var(--color-danger);\n  color: var(--color-danger-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.danger-button[data-v-5e080598]:hover {\n  background-color: var(--color-danger-hover);\n}\n";
+styleInject(css_248z$c);
 
-script$g.__scopeId = "data-v-5e080598";
-script$g.__file = "src/Buttons/DangerButton/DangerButton.vue";
+script$h.__scopeId = "data-v-5e080598";
+script$h.__file = "src/Buttons/DangerButton/DangerButton.vue";
 
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   key: 0,
   class: "modal-overlay"
 };
 const _hoisted_2$7 = { class: "modal-container" };
 
 
-var script$f = {
+var script$g = {
   __name: 'Modal',
   props: {
   open: Boolean,
@@ -865,14 +865,14 @@ const onConfirm = (evt) => emit('confirm', evt);
 
 return (_ctx, _cache) => {
   return (__props.open)
-    ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+    ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$7, [
           _cache[0] || (_cache[0] = createElementVNode("h1", { class: "modal-title" }, "Are you sure?", -1 /* HOISTED */)),
-          createVNode(script$h, {
+          createVNode(script$i, {
             onClick: onCancel,
             text: "No"
           }),
-          createVNode(script$g, {
+          createVNode(script$h, {
             class: "ml-2",
             onClick: onConfirm,
             text: "Yes"
@@ -885,26 +885,26 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$a = "\n.modal-overlay[data-v-11d137c2] {\n  background-color: var(--color-modal-overlay);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.modal-container[data-v-11d137c2] {\n  background-color: var(--color-modal-background);\n  padding: 3.5rem 4rem;\n  border-radius: var(--border-radius-big);\n  text-align: center;\n}\n.modal-title[data-v-11d137c2] {\n  font-size: var(--font-size-large);\n  margin-bottom: 1rem;\n  font-weight: var(--font-weight-bold);\n  color: var(--color-modal-title);\n}\n";
-styleInject(css_248z$a);
+var css_248z$b = "\n.modal-overlay[data-v-11d137c2] {\n  background-color: var(--color-modal-overlay);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.modal-container[data-v-11d137c2] {\n  background-color: var(--color-modal-background);\n  padding: 3.5rem 4rem;\n  border-radius: var(--border-radius-big);\n  text-align: center;\n}\n.modal-title[data-v-11d137c2] {\n  font-size: var(--font-size-large);\n  margin-bottom: 1rem;\n  font-weight: var(--font-weight-bold);\n  color: var(--color-modal-title);\n}\n";
+styleInject(css_248z$b);
 
-script$f.__scopeId = "data-v-11d137c2";
-script$f.__file = "src/Modal/Modal.vue";
+script$g.__scopeId = "data-v-11d137c2";
+script$g.__file = "src/Modal/Modal.vue";
 
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   class: "spinner",
   role: "status"
 };
 
 
-var script$e = {
+var script$f = {
   __name: 'Spinner',
   setup(__props) {
 
 // No logic needed
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$e, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("div", _hoisted_1$f, _cache[0] || (_cache[0] = [
     createElementVNode("span", { class: "sr-only-text" }, "Please wait...", -1 /* HOISTED */)
   ])))
 }
@@ -912,19 +912,19 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$9 = "\n.spinner[data-v-3d456f9a] {\n  display: inline-block;\n  height: 2rem;\n  width: 2rem;\n  border: 4px solid currentColor;\n  border-right-color: transparent;\n  border-radius: var(--border-radius-round);\n  animation: spin-3d456f9a 1.5s linear infinite;\n}\n.sr-only-text[data-v-3d456f9a] {\n  position: absolute;\n  margin: -1px;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  white-space: nowrap;\n  border: 0;\n  padding: 0;\n  clip: rect(0, 0, 0, 0);\n}\n@keyframes spin-3d456f9a {\nfrom {\n    transform: rotate(0deg);\n}\nto {\n    transform: rotate(360deg);\n}\n}\n";
-styleInject(css_248z$9);
+var css_248z$a = "\n.spinner[data-v-3d456f9a] {\n  display: inline-block;\n  height: 2rem;\n  width: 2rem;\n  border: 4px solid currentColor;\n  border-right-color: transparent;\n  border-radius: var(--border-radius-round);\n  animation: spin-3d456f9a 1.5s linear infinite;\n}\n.sr-only-text[data-v-3d456f9a] {\n  position: absolute;\n  margin: -1px;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  white-space: nowrap;\n  border: 0;\n  padding: 0;\n  clip: rect(0, 0, 0, 0);\n}\n@keyframes spin-3d456f9a {\nfrom {\n    transform: rotate(0deg);\n}\nto {\n    transform: rotate(360deg);\n}\n}\n";
+styleInject(css_248z$a);
 
-script$e.__scopeId = "data-v-3d456f9a";
-script$e.__file = "src/Spinner/Spinner.vue";
+script$f.__scopeId = "data-v-3d456f9a";
+script$f.__file = "src/Spinner/Spinner.vue";
 
-const _hoisted_1$d = { class: "ranges-editor" };
+const _hoisted_1$e = { class: "ranges-editor" };
 const _hoisted_2$6 = { class: "labels" };
 const _hoisted_3$5 = { class: "label" };
 const _hoisted_4$1 = { class: "label" };
 
 
-var script$d = {
+var script$e = {
   __name: 'RangeView',
   props: {
   ranges: Array,
@@ -934,7 +934,7 @@ var script$d = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$d, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$e, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(__props.ranges, (range, index) => {
       return (openBlock(), createElementBlock("div", {
         class: "range",
@@ -953,19 +953,19 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$8 = "\n.ranges-editor[data-v-3e589c2c] {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n}\n.range[data-v-3e589c2c] {\n    min-width: 50px;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n.labels[data-v-3e589c2c] {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n}\n.gap[data-v-3e589c2c] {\n    height: 10px;\n    width: auto;\n    background-color: red;\n    border: 1px solid black;\n}\n.label[data-v-3e589c2c] {\n    margin-top: 5px;\n}\n";
-styleInject(css_248z$8);
+var css_248z$9 = "\n.ranges-editor[data-v-3e589c2c] {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n}\n.range[data-v-3e589c2c] {\n    min-width: 50px;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n.labels[data-v-3e589c2c] {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n}\n.gap[data-v-3e589c2c] {\n    height: 10px;\n    width: auto;\n    background-color: red;\n    border: 1px solid black;\n}\n.label[data-v-3e589c2c] {\n    margin-top: 5px;\n}\n";
+styleInject(css_248z$9);
 
-script$d.__scopeId = "data-v-3e589c2c";
-script$d.__file = "src/RangeView/RangeView.vue";
+script$e.__scopeId = "data-v-3e589c2c";
+script$e.__file = "src/RangeView/RangeView.vue";
 
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   class: "reset-button",
   type: "reset"
 };
 
 
-var script$c = {
+var script$d = {
   __name: 'ResetButton',
   props: {
   text: String,
@@ -975,22 +975,22 @@ var script$c = {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("button", _hoisted_1$c, toDisplayString(__props.text), 1 /* TEXT */))
+  return (openBlock(), createElementBlock("button", _hoisted_1$d, toDisplayString(__props.text), 1 /* TEXT */))
 }
 }
 
 };
 
-var css_248z$7 = "\n.reset-button[data-v-70384d7c] {\n  background-color: var(--color-reset);\n  color: var(--color-reset-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.reset-button[data-v-70384d7c]:hover {\n  background-color: var(--color-reset-hover);\n}\n";
-styleInject(css_248z$7);
+var css_248z$8 = "\n.reset-button[data-v-70384d7c] {\n  background-color: var(--color-reset);\n  color: var(--color-reset-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.reset-button[data-v-70384d7c]:hover {\n  background-color: var(--color-reset-hover);\n}\n";
+styleInject(css_248z$8);
 
-script$c.__scopeId = "data-v-70384d7c";
-script$c.__file = "src/Buttons/ResetButton/ResetButton.vue";
+script$d.__scopeId = "data-v-70384d7c";
+script$d.__file = "src/Buttons/ResetButton/ResetButton.vue";
 
-const _hoisted_1$b = ["disabled"];
+const _hoisted_1$c = ["disabled"];
 
 
-var script$b = {
+var script$c = {
   __name: 'SubmitButton',
   props: {
   text: String,
@@ -1005,24 +1005,24 @@ return (_ctx, _cache) => {
     class: "submit-button",
     type: "submit",
     disabled: __props.disabled
-  }, toDisplayString(__props.text), 9 /* TEXT, PROPS */, _hoisted_1$b))
+  }, toDisplayString(__props.text), 9 /* TEXT, PROPS */, _hoisted_1$c))
 }
 }
 
 };
 
-var css_248z$6 = "\n.submit-button[data-v-f7f11890] {\n  background-color: var(--color-submit);\n  color: var(--color-submit-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.submit-button[data-v-f7f11890]:hover {\n  background-color: var(--color-submit-hover);\n}\n.submit-button[data-v-f7f11890]:disabled {\n  background-color: var(--color-submit-disabled);\n  cursor: not-allowed;\n}\n";
-styleInject(css_248z$6);
+var css_248z$7 = "\n.submit-button[data-v-f7f11890] {\n  background-color: var(--color-submit);\n  color: var(--color-submit-text);\n  font-weight: var(--font-weight-bold);\n  padding: var(--button-padding);\n  border-radius: var(--border-radius-base);\n  border: var(--button-border);\n  cursor: pointer;\n  transition: var(--button-transition);\n}\n.submit-button[data-v-f7f11890]:hover {\n  background-color: var(--color-submit-hover);\n}\n.submit-button[data-v-f7f11890]:disabled {\n  background-color: var(--color-submit-disabled);\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z$7);
 
-script$b.__scopeId = "data-v-f7f11890";
-script$b.__file = "src/Buttons/SubmitButton/SubmitButton.vue";
+script$c.__scopeId = "data-v-f7f11890";
+script$c.__file = "src/Buttons/SubmitButton/SubmitButton.vue";
 
-const _hoisted_1$a = { class: "text-input-container" };
+const _hoisted_1$b = { class: "text-input-container" };
 const _hoisted_2$5 = ["for"];
 const _hoisted_3$4 = ["id", "name", "required", "disabled", "placeholder", "value"];
 
 
-var script$a = {
+var script$b = {
   __name: 'TextInput',
   props: {
   id: String,
@@ -1040,7 +1040,7 @@ const emit = __emit;
 const onInput = (event) => emit('update', event.target.value);
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
     createElementVNode("label", {
       class: "text-input-label",
       for: __props.id
@@ -1062,18 +1062,18 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$5 = "\n.text-input-container[data-v-6df3547e] {\n  margin-bottom: 1rem;\n}\n.text-input-label[data-v-6df3547e] {\n  display: block;\n  color: var(--color-text-input-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.text-input-field[data-v-6df3547e] {\n  box-shadow: 0 1px 3px var(--color-text-input-shadow);\n  appearance: none;\n  border: 1px solid var(--color-text-input-border);\n  border-radius: var(--border-radius--base);\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-text-input);\n  line-height: 1.25;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.text-input-field[data-v-6df3547e]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-text-input-shadow);\n  border-color: var(--color-text-input-border-focus);\n}\n.text-input-field[data-v-6df3547e]:disabled {\n  background-color: var(--color-input-disabled);\n  cursor: not-allowed;\n}\n";
-styleInject(css_248z$5);
+var css_248z$6 = "\n.text-input-container[data-v-6df3547e] {\n  margin-bottom: 1rem;\n}\n.text-input-label[data-v-6df3547e] {\n  display: block;\n  color: var(--color-text-input-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.text-input-field[data-v-6df3547e] {\n  box-shadow: 0 1px 3px var(--color-text-input-shadow);\n  appearance: none;\n  border: 1px solid var(--color-text-input-border);\n  border-radius: var(--border-radius--base);\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-text-input);\n  line-height: 1.25;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.text-input-field[data-v-6df3547e]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-text-input-shadow);\n  border-color: var(--color-text-input-border-focus);\n}\n.text-input-field[data-v-6df3547e]:disabled {\n  background-color: var(--color-input-disabled);\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z$6);
 
-script$a.__scopeId = "data-v-6df3547e";
-script$a.__file = "src/Inputs/TextInput/TextInput.vue";
+script$b.__scopeId = "data-v-6df3547e";
+script$b.__file = "src/Inputs/TextInput/TextInput.vue";
 
-const _hoisted_1$9 = { class: "checkbox-container" };
+const _hoisted_1$a = { class: "checkbox-container" };
 const _hoisted_2$4 = ["id", "name", "required", "value"];
 const _hoisted_3$3 = ["for"];
 
 
-var script$9 = {
+var script$a = {
   __name: 'CheckBoxInput',
   props: {
   id: String,
@@ -1090,7 +1090,7 @@ const emit = __emit;
 const onInput = (event) => emit('update', event.target.value);
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("input", {
       id: __props.id,
       name: __props.id,
@@ -1110,18 +1110,18 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$4 = "\n.checkbox-container[data-v-4612e592] {\n  margin-bottom: 1rem;\n}\ninput[type=\"checkbox\"][data-v-4612e592] {\n  margin-right: 0.5rem;\n}\n.checkbox-label[data-v-4612e592] {\n  display: block;\n  color: var(--color-checkbox-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n}\n";
-styleInject(css_248z$4);
+var css_248z$5 = "\n.checkbox-container[data-v-4612e592] {\n  margin-bottom: 1rem;\n}\ninput[type=\"checkbox\"][data-v-4612e592] {\n  margin-right: 0.5rem;\n}\n.checkbox-label[data-v-4612e592] {\n  display: block;\n  color: var(--color-checkbox-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n}\n";
+styleInject(css_248z$5);
 
-script$9.__scopeId = "data-v-4612e592";
-script$9.__file = "src/Inputs/CheckBoxInput/CheckBoxInput.vue";
+script$a.__scopeId = "data-v-4612e592";
+script$a.__file = "src/Inputs/CheckBoxInput/CheckBoxInput.vue";
 
-const _hoisted_1$8 = { class: "number-input-container" };
+const _hoisted_1$9 = { class: "number-input-container" };
 const _hoisted_2$3 = ["for"];
 const _hoisted_3$2 = ["id", "name", "required", "placeholder", "disabled", "value", "min", "step"];
 
 
-var script$8 = {
+var script$9 = {
   __name: 'NumberInput',
   props: {
   id: String,
@@ -1141,7 +1141,7 @@ const emit = __emit;
 const onInput = (event) => emit('update', event.target.value);
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$9, [
     createElementVNode("label", {
       class: "number-input-label",
       for: __props.id
@@ -1165,18 +1165,18 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$3 = "\n.number-input-container[data-v-26abc846] {\n  margin-bottom: 1rem;\n}\n.number-input-label[data-v-26abc846] {\n  display: block;\n  color: var(--color-number-input-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.number-input-field[data-v-26abc846] {\n  box-shadow: 0 1px 3px var(--color-input-shadow);\n  appearance: none;\n  border: 1px solid var(--color-number-input-border);\n  border-radius: var(--border-radius--base);\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-number-input);\n  line-height: 1.25;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.number-input-field[data-v-26abc846]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-input-shadow-focus);\n  border-color: var(--color-number-input-border-focus);\n}\n.number-input-field[data-v-26abc846]:disabled {\n  background-color: var(--color-input-disabled);\n  cursor: not-allowed;\n}\n";
-styleInject(css_248z$3);
+var css_248z$4 = "\n.number-input-container[data-v-26abc846] {\n  margin-bottom: 1rem;\n}\n.number-input-label[data-v-26abc846] {\n  display: block;\n  color: var(--color-number-input-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.number-input-field[data-v-26abc846] {\n  box-shadow: 0 1px 3px var(--color-input-shadow);\n  appearance: none;\n  border: 1px solid var(--color-number-input-border);\n  border-radius: var(--border-radius--base);\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-number-input);\n  line-height: 1.25;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.number-input-field[data-v-26abc846]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-input-shadow-focus);\n  border-color: var(--color-number-input-border-focus);\n}\n.number-input-field[data-v-26abc846]:disabled {\n  background-color: var(--color-input-disabled);\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z$4);
 
-script$8.__scopeId = "data-v-26abc846";
-script$8.__file = "src/Inputs/NumberInput/NumberInput.vue";
+script$9.__scopeId = "data-v-26abc846";
+script$9.__file = "src/Inputs/NumberInput/NumberInput.vue";
 
-const _hoisted_1$7 = { class: "image-input-container" };
+const _hoisted_1$8 = { class: "image-input-container" };
 const _hoisted_2$2 = ["for"];
 const _hoisted_3$1 = ["id", "name", "required", "placeholder", "value", "drop-placeholder"];
 
 
-var script$7 = {
+var script$8 = {
   __name: 'ImageInput',
   props: {
   id: String,
@@ -1194,7 +1194,7 @@ const emit = __emit;
 const onInput = (event) => emit('update', event.target.files[0]);
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
     createElementVNode("label", {
       class: "image-input-label",
       for: __props.id
@@ -1217,11 +1217,11 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$2 = "\n.image-input-container[data-v-d90b5f3c] {\n  margin-bottom: 1rem;\n}\n.image-input-label[data-v-d90b5f3c] {\n  display: block;\n  color: var(--color-image-input);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.image-input-field[data-v-d90b5f3c] {\n  box-shadow: 0 1px 3px var(--color-input-shadow);\n  appearance: none;\n  border: 1px solid var(--color-image-input-border);\n  border-radius: var(--border-radius--base);\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-image-input);\n  line-height: 1.25;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.image-input-field[data-v-d90b5f3c]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-image-input-shadow);\n  border-color: var(--color-image-input-border-focus);\n}\n";
-styleInject(css_248z$2);
+var css_248z$3 = "\n.image-input-container[data-v-d90b5f3c] {\n  margin-bottom: 1rem;\n}\n.image-input-label[data-v-d90b5f3c] {\n  display: block;\n  color: var(--color-image-input);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.image-input-field[data-v-d90b5f3c] {\n  box-shadow: 0 1px 3px var(--color-input-shadow);\n  appearance: none;\n  border: 1px solid var(--color-image-input-border);\n  border-radius: var(--border-radius--base);\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-image-input);\n  line-height: 1.25;\n  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.image-input-field[data-v-d90b5f3c]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-image-input-shadow);\n  border-color: var(--color-image-input-border-focus);\n}\n";
+styleInject(css_248z$3);
 
-script$7.__scopeId = "data-v-d90b5f3c";
-script$7.__file = "src/Inputs/ImageInput/ImageInput.vue";
+script$8.__scopeId = "data-v-d90b5f3c";
+script$8.__file = "src/Inputs/ImageInput/ImageInput.vue";
 
 /*! image-blob-reduce 4.1.0 https://github.com/nodeca/image-blob-reduce @license MIT */
 function commonjsRequire (path) {
@@ -4818,11 +4818,11 @@ ImageBlobReduce.pica = pica;
 
 var imageBlobReduce = ImageBlobReduce;
 
-const _hoisted_1$6 = { class: "image-input-container" };
+const _hoisted_1$7 = { class: "image-input-container" };
 const _hoisted_2$1 = { key: 0 };
 
 
-var script$6 = {
+var script$7 = {
   __name: 'ResizeImageUpload',
   props: {
   id: String,
@@ -4855,8 +4855,8 @@ const onInput = async (file) => {
 };
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
-    createVNode(script$7, {
+  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+    createVNode(script$8, {
       id: __props.id,
       name: __props.id,
       required: __props.required,
@@ -4874,20 +4874,20 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z$1 = "\nimage-input[data-v-3fb95754] {\n  display: block;\n  margin-bottom: 1rem;\n}\nimage-input label[data-v-3fb95754] {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-small);\n  color: var(--color-image-input);\n}\nimage-input input[type=\"file\"][data-v-3fb95754] {\n  display: block;\n  width: 100%;\n  padding: 0.5rem;\n  border: 1px solid var(--color-image-input-border);\n  border-radius: var(--border-radius--base);\n  color: var(--color-image-input);\n  background-color: var(--color-image-input-background);\n  cursor: pointer;\n}\nimage-input input[type=\"file\"][data-v-3fb95754]:focus {\n  outline: none;\n  border-color: var(--color-image-input-border-focus);\n  box-shadow: 0 0 0 3px var(--color-image-input-shadow);\n}\nimage-input input[type=\"file\"][data-v-3fb95754]:disabled {\n  background-color: var(--color-input-disabled);\n  cursor: not-allowed;\n}\n";
-styleInject(css_248z$1);
+var css_248z$2 = "\nimage-input[data-v-3fb95754] {\n  display: block;\n  margin-bottom: 1rem;\n}\nimage-input label[data-v-3fb95754] {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-small);\n  color: var(--color-image-input);\n}\nimage-input input[type=\"file\"][data-v-3fb95754] {\n  display: block;\n  width: 100%;\n  padding: 0.5rem;\n  border: 1px solid var(--color-image-input-border);\n  border-radius: var(--border-radius--base);\n  color: var(--color-image-input);\n  background-color: var(--color-image-input-background);\n  cursor: pointer;\n}\nimage-input input[type=\"file\"][data-v-3fb95754]:focus {\n  outline: none;\n  border-color: var(--color-image-input-border-focus);\n  box-shadow: 0 0 0 3px var(--color-image-input-shadow);\n}\nimage-input input[type=\"file\"][data-v-3fb95754]:disabled {\n  background-color: var(--color-input-disabled);\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z$2);
 
-script$6.__scopeId = "data-v-3fb95754";
-script$6.__file = "src/Inputs/ResizeImageUpload/ResizeImageUpload.vue";
+script$7.__scopeId = "data-v-3fb95754";
+script$7.__file = "src/Inputs/ResizeImageUpload/ResizeImageUpload.vue";
 
-const _hoisted_1$5 = { class: "selector-container" };
+const _hoisted_1$6 = { class: "selector-container" };
 const _hoisted_2 = ["for"];
 const _hoisted_3 = { class: "selector-relative-container" };
 const _hoisted_4 = ["id", "disabled"];
 const _hoisted_5 = ["value", "disabled"];
 
 
-var script$5 = {
+var script$6 = {
   __name: 'Selector',
   props: {
   id: String,
@@ -4920,7 +4920,7 @@ watch(() => props.options, (newOptions) => {
 const onChange = () => emit('selected', selected.value);
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
     createElementVNode("label", {
       class: "selector-label",
       for: __props.id
@@ -4959,16 +4959,16 @@ return (_ctx, _cache) => {
 
 };
 
-var css_248z = "\n.selector-container[data-v-008e1be2] {\n  margin-bottom: 1rem;\n}\n.selector-label[data-v-008e1be2] {\n  display: block;\n  color: var(--color-selector-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.selector-relative-container[data-v-008e1be2] {\n  position: relative;\n}\n.selector-field[data-v-008e1be2] {\n  appearance: none;\n  width: 100%;\n  background-color: var(--color-selector-background);\n  border: 1px solid var(--color-selector-border);\n  color: var(--color-selector-text);\n  padding: 0.75rem 1rem 0.75rem 0.75rem;\n  padding-right: 2rem;\n  border-radius: var(--border-radius--base);\n  line-height: 1.25;\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.selector-field[data-v-008e1be2]:focus {\n  outline: none;\n  background-color: var(--color-selector-background-focused);\n  border-color: var(--color-selector-border-focused);\n}\n.selector-icon-container[data-v-008e1be2] {\n  pointer-events: none;\n  position: absolute;\n  inset: 0 auto;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  color: var(--color-selector-icon-container);\n}\n.selector-icon[data-v-008e1be2] {\n  fill: currentColor;\n  height: 1rem;\n  width: 1rem;\n}\n";
-styleInject(css_248z);
+var css_248z$1 = "\n.selector-container[data-v-008e1be2] {\n  margin-bottom: 1rem;\n}\n.selector-label[data-v-008e1be2] {\n  display: block;\n  color: var(--color-selector-label);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-bold);\n  margin-bottom: 0.5rem;\n}\n.selector-relative-container[data-v-008e1be2] {\n  position: relative;\n}\n.selector-field[data-v-008e1be2] {\n  appearance: none;\n  width: 100%;\n  background-color: var(--color-selector-background);\n  border: 1px solid var(--color-selector-border);\n  color: var(--color-selector-text);\n  padding: 0.75rem 1rem 0.75rem 0.75rem;\n  padding-right: 2rem;\n  border-radius: var(--border-radius--base);\n  line-height: 1.25;\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n}\n.selector-field[data-v-008e1be2]:focus {\n  outline: none;\n  background-color: var(--color-selector-background-focused);\n  border-color: var(--color-selector-border-focused);\n}\n.selector-icon-container[data-v-008e1be2] {\n  pointer-events: none;\n  position: absolute;\n  inset: 0 auto;\n  right: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  color: var(--color-selector-icon-container);\n}\n.selector-icon[data-v-008e1be2] {\n  fill: currentColor;\n  height: 1rem;\n  width: 1rem;\n}\n";
+styleInject(css_248z$1);
 
-script$5.__scopeId = "data-v-008e1be2";
-script$5.__file = "src/Inputs/Selector/Selector.vue";
+script$6.__scopeId = "data-v-008e1be2";
+script$6.__file = "src/Inputs/Selector/Selector.vue";
 
-const _hoisted_1$4 = ["width", "height", "stroke"];
+const _hoisted_1$5 = ["width", "height", "stroke"];
 
 
-var script$4 = {
+var script$5 = {
   __name: 'DropIcon',
   props: {
   size: {
@@ -4999,18 +4999,18 @@ return (_ctx, _cache) => {
   }, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" }, null, -1 /* HOISTED */),
     createElementVNode("path", { d: "M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" }, null, -1 /* HOISTED */)
-  ]), 8 /* PROPS */, _hoisted_1$4))
+  ]), 8 /* PROPS */, _hoisted_1$5))
 }
 }
 
 };
 
-script$4.__file = "src/Icons/DropIcon/DropIcon.vue";
+script$5.__file = "src/Icons/DropIcon/DropIcon.vue";
 
-const _hoisted_1$3 = ["width", "height", "stroke"];
+const _hoisted_1$4 = ["width", "height", "stroke"];
 
 
-var script$3 = {
+var script$4 = {
   __name: 'SkullIcon',
   props: {
   size: {
@@ -5051,18 +5051,18 @@ return (_ctx, _cache) => {
       cy: "12",
       r: "1"
     }, null, -1 /* HOISTED */)
-  ]), 8 /* PROPS */, _hoisted_1$3))
+  ]), 8 /* PROPS */, _hoisted_1$4))
 }
 }
 
 };
 
-script$3.__file = "src/Icons/SkullIcon/SkullIcon.vue";
+script$4.__file = "src/Icons/SkullIcon/SkullIcon.vue";
 
-const _hoisted_1$2 = ["width", "height", "stroke"];
+const _hoisted_1$3 = ["width", "height", "stroke"];
 
 
-var script$2 = {
+var script$3 = {
   __name: 'CalendarIcon',
   props: {
   size: {
@@ -5101,18 +5101,18 @@ return (_ctx, _cache) => {
       rx: "2"
     }, null, -1 /* HOISTED */),
     createElementVNode("path", { d: "M3 10h18" }, null, -1 /* HOISTED */)
-  ]), 8 /* PROPS */, _hoisted_1$2))
+  ]), 8 /* PROPS */, _hoisted_1$3))
 }
 }
 
 };
 
-script$2.__file = "src/Icons/CalendarIcon/CalendarIcon.vue";
+script$3.__file = "src/Icons/CalendarIcon/CalendarIcon.vue";
 
-const _hoisted_1$1 = ["width", "height", "stroke"];
+const _hoisted_1$2 = ["width", "height", "stroke"];
 
 
-var script$1 = {
+var script$2 = {
   __name: 'SaveIcon',
   props: {
   size: {
@@ -5144,18 +5144,18 @@ return (_ctx, _cache) => {
     createElementVNode("path", { d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }, null, -1 /* HOISTED */),
     createElementVNode("path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" }, null, -1 /* HOISTED */),
     createElementVNode("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" }, null, -1 /* HOISTED */)
-  ]), 8 /* PROPS */, _hoisted_1$1))
+  ]), 8 /* PROPS */, _hoisted_1$2))
 }
 }
 
 };
 
-script$1.__file = "src/Icons/SaveIcon/SaveIcon.vue";
+script$2.__file = "src/Icons/SaveIcon/SaveIcon.vue";
 
-const _hoisted_1 = ["width", "height", "stroke"];
+const _hoisted_1$1 = ["width", "height", "stroke"];
 
 
-var script = {
+var script$1 = {
   __name: 'CreateIcon',
   props: {
   size: {
@@ -5197,13 +5197,82 @@ return (_ctx, _cache) => {
       y1: "12",
       y2: "12"
     }, null, -1 /* HOISTED */)
-  ]), 8 /* PROPS */, _hoisted_1))
+  ]), 8 /* PROPS */, _hoisted_1$1))
+}
+}
+
+};
+
+script$1.__file = "src/Icons/CreateIcon/CreateIcon.vue";
+
+const _hoisted_1 = { class: "infinite-scroll-container" };
+
+
+var script = {
+  __name: 'InfiniteScroll',
+  props: {
+  threshold: {
+    type: Number,
+    default: 0.1
+  },
+  rootMargin: {
+    type: String,
+    default: '0px'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+},
+  emits: ['load-more'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+
+const emit = __emit;
+const sentinel = ref(null);
+let observer = null;
+
+onMounted(() => {
+  observer = new IntersectionObserver(([entry]) => {
+    if (entry.isIntersecting && !props.disabled) {
+      emit('load-more');
+    }
+  }, {
+    rootMargin: props.rootMargin,
+    threshold: props.threshold
+  });
+
+  if (sentinel.value) {
+    observer.observe(sentinel.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (observer) {
+    observer.disconnect();
+  }
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default"),
+    createElementVNode("div", {
+      class: "sentinel",
+      ref_key: "sentinel",
+      ref: sentinel
+    }, null, 512 /* NEED_PATCH */)
+  ]))
 }
 }
 
 };
 
-script.__file = "src/Icons/CreateIcon/CreateIcon.vue";
+var css_248z = "\n.infinite-scroll-container[data-v-69ac2b46] {\n  width: 100%;\n}\n.sentinel[data-v-69ac2b46] {\n  height: var(--infinite-scroll-sentinel-height, 1px);\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+script.__scopeId = "data-v-69ac2b46";
+script.__file = "src/InfiniteScroll/InfiniteScroll.vue";
 
-export { script$j as Badge, script$2 as CalendarIcon, script$x as Card, script$w as CardGrid, script$9 as CheckBoxInput, script$v as Container, script as CreateIcon, script$g as DangerButton, script$4 as DropIcon, script$7 as ImageInput, script$A as Loading, script$f as Modal, script$n as Navbar, script$8 as NumberInput, script$k as Pagination, script$d as RangeView, script$l as RegularButton, script$c as ResetButton, script$6 as ResizeImageUpload, script$1 as SaveIcon, script$h as SecondaryButton, script$B as SectionTitle, script$5 as Selector, script$3 as SkullIcon, script$e as Spinner, script$m as StyledTable, script$b as SubmitButton, script$i as Temperature, script$a as TextInput };
+export { script$k as Badge, script$3 as CalendarIcon, script$y as Card, script$x as CardGrid, script$a as CheckBoxInput, script$w as Container, script$1 as CreateIcon, script$h as DangerButton, script$5 as DropIcon, script$8 as ImageInput, script as InfiniteScroll, script$B as Loading, script$g as Modal, script$o as Navbar, script$9 as NumberInput, script$l as Pagination, script$e as RangeView, script$m as RegularButton, script$d as ResetButton, script$7 as ResizeImageUpload, script$2 as SaveIcon, script$i as SecondaryButton, script$C as SectionTitle, script$6 as Selector, script$4 as SkullIcon, script$f as Spinner, script$n as StyledTable, script$c as SubmitButton, script$j as Temperature, script$b as TextInput };
 //# sourceMappingURL=index.esm.js.map