@namelivia/vue-components 4.5.1 → 4.7.0

package/dist/index.esm.js

@@ -1,20 +1,26 @@
-import { defineComponent, createElementBlock, openBlock, toDisplayString, createStaticVNode, createElementVNode, renderSlot, resolveComponent, createCommentVNode, createVNode, withCtx, normalizeClass, createBlock, Transition, Fragment, renderList, 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';
 
-var script$B = defineComponent({
-  name: 'SectionTitle',
+const _hoisted_1$y = { class: "section-title" };
+
+
+var script$C = {
+  __name: 'SectionTitle',
   props: {
-    text: {
-      type: String,
-      default: ''
-    }
+  text: {
+    type: String,
+    default: ''
   }
-});
+},
+  setup(__props) {
+
 
-const _hoisted_1$x = { class: "section-title" };
 
-function render$B(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("h1", _hoisted_1$x, toDisplayString(_ctx.text), 1 /* TEXT */))
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("h1", _hoisted_1$y, toDisplayString(__props.text), 1 /* TEXT */))
 }
+}
+
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -43,135 +49,143 @@ 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.render = render$B;
-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 = defineComponent({
-  name: "Loading",
+var script$B = {
+  __name: 'Loading',
   props: {
-    text: String,
-  },
-});
+  text: String,
+},
+  setup(__props) {
+
 
-function render$A(_ctx, _cache, $props, $setup, $data, $options) {
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", null, _cache[0] || (_cache[0] = [
     createStaticVNode("<h1 class=\"loading-text\" data-v-7a9a3040>Loading...</h1><div class=\"loading-balls-container\" data-v-7a9a3040><div class=\"loading-ball blue\" data-v-7a9a3040></div><div class=\"loading-ball green\" data-v-7a9a3040></div><div class=\"loading-ball red\" data-v-7a9a3040></div></div>", 2)
   ])))
 }
+}
 
-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.render = render$A;
-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";
 
-var script$z = defineComponent({
-  name: "CardImage",
+const _hoisted_1$x = ["src", "alt"];
+
+
+var script$A = {
+  __name: 'CardImage',
   props: {
-    src: String,
-    alt: String,
-  },
-  data: function () {
-    return {
-      imageWidth: 0,
-    }
-  },
-  methods: {
-    calculateWidth() {
-      return this.$refs.image.clientWidth
-    },
-  },
+  src: String,
+  alt: String,
+},
   emits: ['width'],
-  mounted: function () {
-    this.$emit('width', this.calculateWidth());
-  },
-});
+  setup(__props, { emit: __emit }) {
+
 
-const _hoisted_1$w = ["src", "alt"];
 
-function render$z(_ctx, _cache, $props, $setup, $data, $options) {
+const emit = __emit;
+const image = ref(null);
+
+const calculateWidth = () => image.value.clientWidth;
+
+onMounted(() => {
+  emit('width', calculateWidth());
+});
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("img", {
-    src: _ctx.src,
-    alt: _ctx.alt,
-    ref: "image"
-  }, null, 8 /* PROPS */, _hoisted_1$w))
+    src: __props.src,
+    alt: __props.alt,
+    ref_key: "image",
+    ref: image
+  }, null, 8 /* PROPS */, _hoisted_1$x))
+}
 }
 
-var css_248z$u = "\nimg[data-v-5fa6a3f6] {\n      width: 100%;\n}\n";
-styleInject(css_248z$u);
+};
 
-script$z.render = render$z;
-script$z.__scopeId = "data-v-5fa6a3f6";
-script$z.__file = "src/Card/CardImage.vue";
+var css_248z$v = "\nimg[data-v-5fa6a3f6] {\n      width: 100%;\n}\n";
+styleInject(css_248z$v);
 
-var script$y = defineComponent({
-  name: "CardBody",
-  props: {
-    title: String,
-  },
-});
+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" };
 
-function render$y(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$v, [
-    createElementVNode("div", _hoisted_2$g, toDisplayString(_ctx.title), 1 /* TEXT */),
+
+var script$z = {
+  __name: 'CardBody',
+  props: {
+  title: String,
+},
+  setup(__props) {
+
+
+
+return (_ctx, _cache) => {
+  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")
     ])
   ]))
 }
+}
 
-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);
+};
 
-script$y.render = render$y;
-script$y.__scopeId = "data-v-c140cd30";
-script$y.__file = "src/Card/CardBody.vue";
+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);
 
-var script$x = defineComponent({
-  name: "Card",
-  props: {
-    image: String,
-    title: String,
-    dismissed: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    CardImage: script$z,
-    CardBody: script$y,
-  },
-  emits: ['width']
-});
+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" };
 
-function render$x(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_card_image = resolveComponent("card-image");
-  const _component_card_body = resolveComponent("card-body");
 
-  return (!_ctx.dismissed)
-    ? (openBlock(), createElementBlock("div", _hoisted_1$u, [
+var script$y = {
+  __name: 'Card',
+  props: {
+  image: String,
+  title: String,
+  dismissed: {
+    type: Boolean,
+    default: false,
+  },
+},
+  emits: ['width'],
+  setup(__props) {
+
+
+
+
+
+return (_ctx, _cache) => {
+  return (!__props.dismissed)
+    ? (openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("div", _hoisted_2$f, [
-          createVNode(_component_card_image, {
-            src: _ctx.image,
-            alt: _ctx.title,
+          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(_component_card_body, { title: _ctx.title }, {
+          createVNode(script$z, { title: __props.title }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
             ]),
@@ -181,120 +195,113 @@ function render$x(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
     : createCommentVNode("v-if", true)
 }
+}
 
-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.render = render$x;
-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";
 
-var script$w = defineComponent({
-  name: "CardGrid"
-});
+const _hoisted_1$u = { class: "card-grid" };
 
-const _hoisted_1$t = { class: "card-grid" };
 
-function render$w(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$t, [
+var script$x = {
+  __name: 'CardGrid',
+  setup(__props) {
+
+// No logic needed
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$u, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
+}
 
-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.render = render$w;
-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$t = { class: "container" };
 
-var script$v = defineComponent({
-  name: "Container"
-});
 
-const _hoisted_1$s = { class: "container" };
+var script$w = {
+  __name: 'Container',
+  setup(__props) {
 
-function render$v(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$s, [
+// No logic needed
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$t, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
+}
 
-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$w.__scopeId = "data-v-7cccf06a";
+script$w.__file = "src/Container/Container.vue";
 
-script$v.render = render$v;
-script$v.__scopeId = "data-v-7cccf06a";
-script$v.__file = "src/Container/Container.vue";
+const _hoisted_1$s = ["href"];
 
-var script$u = defineComponent({
-  name: "MobileNavigationLink",
+var script$v = {
+  __name: 'MobileNavigationLink',
   props: {
-    text: {
-      type: String,
-    },
-    href: {
-      type: String,
-    },
-    current: {
-      type: Boolean,
-    },
-  },
-  computed: {
-    linkClass: function () {
-      if (this.current) {
-        return 'current-link'
-      }
-      return 'regular-link'
-    },
-    linkDestination: function () {
-      return this.current ? '#' : this.href
-    },
-  },
-});
+  text: String,
+  href: String,
+  current: Boolean,
+},
+  setup(__props) {
 
-const _hoisted_1$r = ["href"];
+const props = __props;
+const linkClass = computed(() => props.current ? 'current-link' : 'regular-link');
+const linkDestination = computed(() => props.current ? '#' : props.href);
 
-function render$u(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("a", {
-    href: _ctx.linkDestination,
-    class: normalizeClass(_ctx.linkClass),
+    href: linkDestination.value,
+    class: normalizeClass(linkClass.value),
     "aria-current": "page"
-  }, toDisplayString(_ctx.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);
+};
 
-script$u.render = render$u;
-script$u.__scopeId = "data-v-3e279546";
-script$u.__file = "src/Navbar/MobileNavigationLink.vue";
+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);
 
-var script$t = defineComponent({
-  name: "MobileNavigationLinks",
-  components: {
-    MobileNavigationLink: script$u,
-  },
-  props: {
-    links: {
-      type: Array,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  },
-});
+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" };
 
-function render$t(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_mobile_navigation_link = resolveComponent("mobile-navigation-link");
+var script$u = {
+  __name: 'MobileNavigationLinks',
+  props: {
+  links: Array,
+  open: { type: Boolean, default: false },
+},
+  setup(__props) {
+
 
+
+return (_ctx, _cache) => {
   return (openBlock(), createBlock(Transition, {
     "enter-active-class": "fade-scale-enter-active",
     "leave-active-class": "fade-scale-leave-active",
@@ -304,11 +311,11 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
     "leave-to-class": "fade-scale-leave-to"
   }, {
     default: withCtx(() => [
-      (_ctx.open)
-        ? (openBlock(), createElementBlock("div", _hoisted_1$q, [
+      (__props.open)
+        ? (openBlock(), createElementBlock("div", _hoisted_1$r, [
             createElementVNode("div", _hoisted_2$e, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link) => {
-                return (openBlock(), createBlock(_component_mobile_navigation_link, {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
+                return (openBlock(), createBlock(script$v, {
                   key: link.id,
                   href: link.href,
                   text: link.text,
@@ -322,79 +329,65 @@ function render$t(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1 /* STABLE */
   }))
 }
+}
 
-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$u.__scopeId = "data-v-eb1296c6";
+script$u.__file = "src/Navbar/MobileNavigationLinks.vue";
 
-script$t.render = render$t;
-script$t.__scopeId = "data-v-eb1296c6";
-script$t.__file = "src/Navbar/MobileNavigationLinks.vue";
+const _hoisted_1$q = ["href"];
 
-var script$s = defineComponent({
-  name: "NavigationLink",
+var script$t = {
+  __name: 'NavigationLink',
   props: {
-    text: {
-      type: String,
-    },
-    href: {
-      type: String,
-    },
-    current: {
-      type: Boolean,
-    },
-  },
-  computed: {
-    linkClass: function () {
-      if (this.current) {
-        return 'current-link'
-      }
-      return 'regular-link'
-    },
-    linkDestination: function () {
-      return this.current ? '#' : this.href
-    },
-  },
-});
+  text: String,
+  href: String,
+  current: Boolean,
+},
+  setup(__props) {
 
-const _hoisted_1$p = ["href"];
+const props = __props;
+const linkClass = computed(() => props.current ? 'current-link' : 'regular-link');
+const linkDestination = computed(() => props.current ? '#' : props.href);
 
-function render$s(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("a", {
-    href: _ctx.linkDestination,
-    class: normalizeClass(_ctx.linkClass),
+    href: linkDestination.value,
+    class: normalizeClass(linkClass.value),
     "aria-current": "page"
-  }, toDisplayString(_ctx.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);
+};
 
-script$s.render = render$s;
-script$s.__scopeId = "data-v-4989b384";
-script$s.__file = "src/Navbar/NavigationLink.vue";
+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);
 
-var script$r = defineComponent({
-  name: "NavigationLinks",
-  components: {
-    NavigationLink: script$s,
-  },
-  props: {
-    links: {
-      type: Array,
-    },
-  },
-});
+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" };
 
-function render$r(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_navigation_link = resolveComponent("navigation-link");
+var script$s = {
+  __name: 'NavigationLinks',
+  props: {
+  links: Array,
+},
+  setup(__props) {
+
+
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$o, [
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$p, [
     createElementVNode("div", _hoisted_2$d, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link) => {
-        return (openBlock(), createBlock(_component_navigation_link, {
+      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
+        return (openBlock(), createBlock(script$t, {
           key: link.id,
           href: link.href,
           text: link.text,
@@ -404,126 +397,113 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]))
 }
+}
 
-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);
+};
 
-script$r.render = render$r;
-script$r.__scopeId = "data-v-294f43c2";
-script$r.__file = "src/Navbar/NavigationLinks.vue";
+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);
 
-var script$q = defineComponent({
-  name: "NavbarTitle",
-  props: {
-    href: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    imageBig: {
-      type: String,
-    },
-    imageSmall: {
-      type: String,
-    },
-  }
-});
+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"];
 
-function render$q(_ctx, _cache, $props, $setup, $data, $options) {
+
+var script$r = {
+  __name: 'NavbarTitle',
+  props: {
+  href: String,
+  title: String,
+  imageBig: String,
+  imageSmall: String,
+},
+  setup(__props) {
+
+
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("a", {
     class: "title-container",
-    href: _ctx.href
+    href: __props.href
   }, [
     createElementVNode("img", {
       class: "logo-small",
-      src: _ctx.imageSmall,
-      alt: _ctx.title
+      src: __props.imageSmall,
+      alt: __props.title
     }, null, 8 /* PROPS */, _hoisted_2$c),
     createElementVNode("img", {
       class: "logo-big",
-      src: _ctx.imageBig,
-      alt: _ctx.title
+      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);
+};
 
-script$q.render = render$q;
-script$q.__scopeId = "data-v-661ef87c";
-script$q.__file = "src/Navbar/NavbarTitle.vue";
+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);
 
-var script$p = defineComponent({
-  name: "RightContent",
-  props: {
-    locale: {
-      type: String,
-    },
-    currentUserEmail: {
-      type: String,
-    },
-    currentUserName: {
-      type: String,
-    },
-    currentUserPicture: {
-      type: String,
-    },
-  },
-  computed: {
-    avatarAlt: function () {
-      return this.currentUserName + ` (${this.currentUserEmail})`
-    },
-  },
-});
+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"];
 
-function render$p(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$m, [
+var script$q = {
+  __name: 'RightContent',
+  props: {
+  locale: String,
+  currentUserEmail: String,
+  currentUserName: String,
+  currentUserPicture: String,
+},
+  setup(__props) {
+
+const props = __props;
+const avatarAlt = computed(() => `${props.currentUserName} (${props.currentUserEmail})`);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$n, [
     createElementVNode("img", {
       class: "circle-image",
-      src: _ctx.currentUserPicture,
-      alt: _ctx.avatarAlt
+      src: __props.currentUserPicture,
+      alt: avatarAlt.value
     }, null, 8 /* PROPS */, _hoisted_2$b)
   ]))
 }
+}
 
-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);
+};
 
-script$p.render = render$p;
-script$p.__scopeId = "data-v-07675a13";
-script$p.__file = "src/Navbar/RightContent.vue";
+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);
 
-var script$o = defineComponent({
-  name: "MobileMenuButton",
+script$q.__scopeId = "data-v-07675a13";
+script$q.__file = "src/Navbar/RightContent.vue";
+
+var script$p = {
+  __name: 'MobileMenuButton',
   props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  open: { type: Boolean, default: false },
+},
   emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
-});
+  setup(__props, { emit: __emit }) {
+
 
-function render$o(_ctx, _cache, $props, $setup, $data, $options) {
+const emit = __emit;
+const onClick = (evt) => emit('click', evt);
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("button", {
     class: "menu-button",
     type: "button",
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
-  }, _cache[1] || (_cache[1] = [
+    onClick: onClick
+  }, _cache[0] || (_cache[0] = [
     createElementVNode("svg", {
       class: "menu-icon",
       xmlns: "http://www.w3.org/2000/svg",
@@ -540,383 +520,428 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
     ], -1 /* HOISTED */)
   ])))
 }
+}
 
-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);
+};
 
-script$o.render = render$o;
-script$o.__scopeId = "data-v-397545ee";
-script$o.__file = "src/Navbar/MobileMenuButton.vue";
-
-var script$n = defineComponent({
-  name: "Navbar",
-  components: {
-    NavbarTitle: script$q,
-    NavigationLinks: script$r,
-    MobileNavigationLinks: script$t,
-    RightContent: script$p,
-    MobileMenuButton: script$o,
-  },
-  data() {
-    return {
-      mobileMenuOpen: false,
-    }
-  },
-  props: {
-    links: {
-      type: Array,
-    },
-    locale: {
-      type: String,
-    },
-    currentUserEmail: {
-      type: String,
-    },
-    currentUserName: {
-      type: String,
-    },
-    currentUserPicture: {
-      type: String,
-    },
-    title: {
-      type: String,
-    },
-    imageBig: {
-      type: String,
-    },
-    imageSmall: {
-      type: String,
-    },
-  },
-  methods: {
-    onMobileMenuClick() {
-      this.mobileMenuOpen = !this.mobileMenuOpen;
-    },
-  }
-});
+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);
 
-const _hoisted_1$l = { class: "navbar" };
+script$p.__scopeId = "data-v-397545ee";
+script$p.__file = "src/Navbar/MobileMenuButton.vue";
+
+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" };
 
-function render$n(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_mobile_menu_button = resolveComponent("mobile-menu-button");
-  const _component_navbar_title = resolveComponent("navbar-title");
-  const _component_navigation_links = resolveComponent("navigation-links");
-  const _component_right_content = resolveComponent("right-content");
-  const _component_mobile_navigation_links = resolveComponent("mobile-navigation-links");
 
-  return (openBlock(), createElementBlock("nav", _hoisted_1$l, [
+var script$o = {
+  __name: 'Navbar',
+  props: {
+  links: Array,
+  locale: String,
+  currentUserEmail: String,
+  currentUserName: String,
+  currentUserPicture: String,
+  title: String,
+  imageBig: String,
+  imageSmall: String,
+},
+  setup(__props) {
+
+
+
+const mobileMenuOpen = ref(false);
+const onMobileMenuClick = () => {
+  mobileMenuOpen.value = !mobileMenuOpen.value;
+};
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("nav", _hoisted_1$m, [
     createElementVNode("div", _hoisted_2$a, [
       createElementVNode("div", _hoisted_3$8, [
         createElementVNode("div", _hoisted_4$3, [
-          createVNode(_component_mobile_menu_button, {
-            onClick: _ctx.onMobileMenuClick,
-            open: _ctx.mobileMenuOpen
-          }, null, 8 /* PROPS */, ["onClick", "open"])
+          createVNode(script$p, {
+            onClick: onMobileMenuClick,
+            open: mobileMenuOpen.value
+          }, null, 8 /* PROPS */, ["open"])
         ]),
         createElementVNode("div", _hoisted_5$2, [
-          createVNode(_component_navbar_title, {
+          createVNode(script$r, {
             href: "/",
-            title: _ctx.title,
-            imageBig: _ctx.imageBig,
-            imageSmall: _ctx.imageSmall
+            title: __props.title,
+            imageBig: __props.imageBig,
+            imageSmall: __props.imageSmall
           }, null, 8 /* PROPS */, ["title", "imageBig", "imageSmall"]),
-          createVNode(_component_navigation_links, { links: _ctx.links }, null, 8 /* PROPS */, ["links"])
+          createVNode(script$s, { links: __props.links }, null, 8 /* PROPS */, ["links"])
         ]),
-        createVNode(_component_right_content, {
-          locale: _ctx.locale,
-          "current-user-email": _ctx.currentUserEmail,
-          "current-user-name": _ctx.currentUserName,
-          "current-user-picture": _ctx.currentUserPicture
+        createVNode(script$q, {
+          locale: __props.locale,
+          "current-user-email": __props.currentUserEmail,
+          "current-user-name": __props.currentUserName,
+          "current-user-picture": __props.currentUserPicture
         }, null, 8 /* PROPS */, ["locale", "current-user-email", "current-user-name", "current-user-picture"])
       ])
     ]),
-    createVNode(_component_mobile_navigation_links, {
-      links: _ctx.links,
-      open: _ctx.mobileMenuOpen
+    createVNode(script$u, {
+      links: __props.links,
+      open: mobileMenuOpen.value
     }, null, 8 /* PROPS */, ["links", "open"])
   ]))
 }
+}
 
-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);
+};
 
-script$n.render = render$n;
-script$n.__scopeId = "data-v-1b5caf34";
-script$n.__file = "src/Navbar/Navbar.vue";
+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);
 
-var script$m = defineComponent({
-  name: "StyledTable",
-});
+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" };
 
-function render$m(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("table", _hoisted_1$k, [
+
+var script$n = {
+  __name: 'StyledTable',
+  setup(__props) {
+
+// No logic needed
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("table", _hoisted_1$l, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
+}
 
-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$n.__scopeId = "data-v-8e6b2044";
+script$n.__file = "src/StyledTable/StyledTable.vue";
 
-script$m.render = render$m;
-script$m.__scopeId = "data-v-8e6b2044";
-script$m.__file = "src/StyledTable/StyledTable.vue";
+const _hoisted_1$k = ["disabled"];
 
-var script$l = defineComponent({
-  name: "RegularButton",
+
+var script$m = {
+  __name: 'RegularButton',
   props: {
-    text: String,
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    textWhileLoading: {
-      type: String,
-      default: '...',
-    },
+  text: String,
+  loading: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['click'],
-  computed: {
-    cssClass: function () {
-      if (this.loading) {
-        return 'regular-button loading';
-      }
-      return 'regular-button'
-    },
-  },
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
+  textWhileLoading: {
+    type: String,
+    default: '...',
   },
+},
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+
+const emit = __emit;
+
+const cssClass = computed(() => {
+  if (props.loading) {
+    return 'regular-button loading';
+  }
+  return 'regular-button';
 });
 
-const _hoisted_1$j = ["disabled"];
+const onClick = (evt) => {
+  emit('click', evt);
+};
 
-function render$l(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("button", {
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args))),
-    class: normalizeClass(_ctx.cssClass),
-    disabled: _ctx.loading
-  }, toDisplayString(_ctx.loading ? _ctx.textWhileLoading : _ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$j))
+    onClick: onClick,
+    class: normalizeClass(cssClass.value),
+    disabled: __props.loading
+  }, 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);
+};
 
-script$l.render = render$l;
-script$l.__scopeId = "data-v-7c962c54";
-script$l.__file = "src/Buttons/RegularButton/RegularButton.vue";
+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);
 
-var script$k = defineComponent({
-  name: "Pagination",
-  props: {
-    previousLabel: String,
-    nextLabel: String,
-    showPrevious: Boolean,
-    previousLink: String,
-    nextLink: String,
-  },
-  components: {
-    RegularButton: script$l,
-  },
-});
+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"];
 
-function render$k(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_regular_button = resolveComponent("regular-button");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$i, [
-    (_ctx.showPrevious)
+var script$l = {
+  __name: 'Pagination',
+  props: {
+  previousLabel: String,
+  nextLabel: String,
+  showPrevious: Boolean,
+  previousLink: String,
+  nextLink: String,
+},
+  setup(__props) {
+
+
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$j, [
+    (__props.showPrevious)
       ? (openBlock(), createElementBlock("a", {
           key: 0,
-          href: _ctx.previousLink
+          href: __props.previousLink
         }, [
-          createVNode(_component_regular_button, { text: _ctx.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: _ctx.nextLink }, [
-      createVNode(_component_regular_button, { text: _ctx.nextLabel }, null, 8 /* PROPS */, ["text"])
+    createElementVNode("a", { href: __props.nextLink }, [
+      createVNode(script$m, { text: __props.nextLabel }, null, 8 /* PROPS */, ["text"])
     ], 8 /* PROPS */, _hoisted_3$7)
   ]))
 }
+}
 
-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.render = render$k;
-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";
 
-var script$j = defineComponent({
-  name: "Badge",
+const _hoisted_1$i = { class: "badge" };
+
+
+var script$k = {
+  __name: 'Badge',
   props: {
-    text: String,
-  },
-});
+  text: String,
+},
+  setup(__props) {
+
 
-const _hoisted_1$h = { class: "badge" };
 
-function render$j(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("span", _hoisted_1$h, toDisplayString(_ctx.text), 1 /* TEXT */))
+return (_ctx, _cache) => {
+  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);
+};
 
-script$j.render = render$j;
-script$j.__scopeId = "data-v-187659a4";
-script$j.__file = "src/Badge/Badge.vue";
+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);
 
-var script$i = defineComponent({
-  name: "Temperature",
-  props: {
-    title: String,
-    min: Number,
-    max: Number,
-    avg: Number
-  },
-  computed: {
-    minFormatted() {
-      return this.min.toFixed(2);
-    },
-    avgFormatted() {
-      return this.avg.toFixed(2);
-    },
-    maxFormatted() {
-      return this.max.toFixed(2);
-    },
-  },
-});
+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" };
 
-function render$i(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$g, [
-    createElementVNode("div", _hoisted_2$8, toDisplayString(_ctx.title), 1 /* TEXT */),
-    createElementVNode("div", _hoisted_3$6, toDisplayString(_ctx.avgFormatted) + " ℃", 1 /* TEXT */),
+var script$j = {
+  __name: 'Temperature',
+  props: {
+  title: String,
+  min: Number,
+  max: Number,
+  avg: Number
+},
+  setup(__props) {
+
+const props = __props;
+const minFormatted = computed(() => props.min.toFixed(2));
+const avgFormatted = computed(() => props.avg.toFixed(2));
+const maxFormatted = computed(() => props.max.toFixed(2));
+
+return (_ctx, _cache) => {
+  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, [
-      createElementVNode("div", _hoisted_5$1, toDisplayString(_ctx.minFormatted) + " ℃", 1 /* TEXT */),
+      createElementVNode("div", _hoisted_5$1, toDisplayString(minFormatted.value) + " ℃", 1 /* TEXT */),
       _cache[0] || (_cache[0] = createElementVNode("div", { class: "separator" }, "—", -1 /* HOISTED */)),
-      createElementVNode("div", _hoisted_6, toDisplayString(_ctx.maxFormatted) + " ℃", 1 /* TEXT */)
+      createElementVNode("div", _hoisted_6, toDisplayString(maxFormatted.value) + " ℃", 1 /* TEXT */)
     ])
   ]))
 }
+}
+
+};
+
+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$j.__scopeId = "data-v-4250e6d0";
+script$j.__file = "src/Temperature/Temperature.vue";
+
+var script$i = {
+  __name: 'SecondaryButton',
+  props: {
+  text: String,
+},
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
+
+
+const emit = __emit;
+const onClick = (evt) => emit('click', evt);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("button", {
+    class: "secondary-button",
+    onClick: onClick
+  }, toDisplayString(__props.text), 1 /* TEXT */))
+}
+}
+
+};
 
-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";
+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$i.render = render$i;
-script$i.__scopeId = "data-v-4250e6d0";
-script$i.__file = "src/Temperature/Temperature.vue";
+script$i.__scopeId = "data-v-5bb3ed46";
+script$i.__file = "src/Buttons/SecondaryButton/SecondaryButton.vue";
 
-var script$h = defineComponent({
-  name: "Modal",
-  emits: ['cancel', 'confirm'],
+var script$h = {
+  __name: 'DangerButton',
   props: {
-    open: Boolean,
-  },
-  methods: {
-    onCancel(evt) {
-      this.$emit('cancel', evt);
-    },
-    onConfirm(evt) {
-      this.$emit('confirm', evt);
-    },
-  },
-});
+  text: String,
+},
+  emits: ['click'],
+  setup(__props, { emit: __emit }) {
 
-const _hoisted_1$f = {
+
+const emit = __emit;
+const onClick = (evt) => emit('click', evt);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("button", {
+    class: "danger-button",
+    onClick: onClick
+  }, toDisplayString(__props.text), 1 /* TEXT */))
+}
+}
+
+};
+
+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$h.__scopeId = "data-v-5e080598";
+script$h.__file = "src/Buttons/DangerButton/DangerButton.vue";
+
+const _hoisted_1$g = {
   key: 0,
   class: "modal-overlay"
 };
 const _hoisted_2$7 = { class: "modal-container" };
 
-function render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_secondary_button = resolveComponent("secondary-button");
-  const _component_danger_button = resolveComponent("danger-button");
 
-  return (_ctx.open)
-    ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+var script$g = {
+  __name: 'Modal',
+  props: {
+  open: Boolean,
+},
+  emits: ['cancel', 'confirm'],
+  setup(__props, { emit: __emit }) {
+
+
+const emit = __emit;
+const onCancel = (evt) => emit('cancel', evt);
+const onConfirm = (evt) => emit('confirm', evt);
+
+return (_ctx, _cache) => {
+  return (__props.open)
+    ? (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(_component_secondary_button, {
-            onClick: _ctx.onCancel,
+          createVNode(script$i, {
+            onClick: onCancel,
             text: "No"
-          }, null, 8 /* PROPS */, ["onClick"]),
-          createVNode(_component_danger_button, {
+          }),
+          createVNode(script$h, {
             class: "ml-2",
-            onClick: _ctx.onConfirm,
+            onClick: onConfirm,
             text: "Yes"
-          }, null, 8 /* PROPS */, ["onClick"])
+          })
         ])
       ]))
     : createCommentVNode("v-if", true)
 }
+}
 
-var css_248z$c = "\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$c);
+};
 
-script$h.render = render$h;
-script$h.__scopeId = "data-v-11d137c2";
-script$h.__file = "src/Modal/Modal.vue";
+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);
 
-var script$g = defineComponent({
-  name: "Spinner",
-});
+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"
 };
 
-function render$g(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$e, _cache[0] || (_cache[0] = [
+
+var script$f = {
+  __name: 'Spinner',
+  setup(__props) {
+
+// No logic needed
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$f, _cache[0] || (_cache[0] = [
     createElementVNode("span", { class: "sr-only-text" }, "Please wait...", -1 /* HOISTED */)
   ])))
 }
+}
 
-var css_248z$b = "\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$b);
+};
 
-script$g.render = render$g;
-script$g.__scopeId = "data-v-3d456f9a";
-script$g.__file = "src/Spinner/Spinner.vue";
+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);
 
-var script$f = defineComponent({
-  name: "RangeView",
-  props: {
-    ranges: Array,
-  },
-});
+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" };
 
-function render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$d, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.ranges, (range, index) => {
+
+var script$e = {
+  __name: 'RangeView',
+  props: {
+  ranges: Array,
+},
+  setup(__props) {
+
+
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$e, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(__props.ranges, (range, index) => {
       return (openBlock(), createElementBlock("div", {
         class: "range",
         key: range.id
       }, [
         createElementVNode("div", _hoisted_2$6, [
-          createElementVNode("span", _hoisted_3$5, toDisplayString(index < _ctx.ranges.length - 1 ? range.max : ' '), 1 /* TEXT */)
+          createElementVNode("span", _hoisted_3$5, toDisplayString(index < __props.ranges.length - 1 ? range.max : ' '), 1 /* TEXT */)
         ]),
         _cache[0] || (_cache[0] = createElementVNode("div", { class: "gap" }, null, -1 /* HOISTED */)),
         createElementVNode("span", _hoisted_4$1, toDisplayString(range.label), 1 /* TEXT */)
@@ -924,367 +949,279 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128 /* KEYED_FRAGMENT */))
   ]))
 }
+}
 
-var css_248z$a = "\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$a);
+};
 
-script$f.render = render$f;
-script$f.__scopeId = "data-v-3e589c2c";
-script$f.__file = "src/RangeView/RangeView.vue";
+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);
 
-var script$e = defineComponent({
-  name: "ResetButton",
-  props: {
-    text: String,
-  },
-});
+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"
 };
 
-function render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("button", _hoisted_1$c, toDisplayString(_ctx.text), 1 /* TEXT */))
-}
-
-var css_248z$9 = "\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$9);
-
-script$e.render = render$e;
-script$e.__scopeId = "data-v-70384d7c";
-script$e.__file = "src/Buttons/ResetButton/ResetButton.vue";
 
-var script$d = defineComponent({
-  name: "SubmitButton",
+var script$d = {
+  __name: 'ResetButton',
   props: {
-    text: {
-        type: String,
-    },
-    disabled: {
-        type: Boolean,
-    },
-  },
-});
+  text: String,
+},
+  setup(__props) {
 
-const _hoisted_1$b = ["disabled"];
 
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("button", {
-    class: "submit-button",
-    type: "submit",
-    disabled: _ctx.disabled
-  }, toDisplayString(_ctx.text), 9 /* TEXT, PROPS */, _hoisted_1$b))
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("button", _hoisted_1$d, toDisplayString(__props.text), 1 /* TEXT */))
+}
 }
 
-var css_248z$8 = "\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";
+};
+
+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$d.render = render$d;
-script$d.__scopeId = "data-v-f7f11890";
-script$d.__file = "src/Buttons/SubmitButton/SubmitButton.vue";
+script$d.__scopeId = "data-v-70384d7c";
+script$d.__file = "src/Buttons/ResetButton/ResetButton.vue";
 
-var script$c = defineComponent({
-  name: "SecondaryButton",
-  props: {
-    text: String,
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
-});
+const _hoisted_1$c = ["disabled"];
 
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("button", {
-    class: "secondary-button",
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
-  }, toDisplayString(_ctx.text), 1 /* TEXT */))
-}
 
-var css_248z$7 = "\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$7);
+var script$c = {
+  __name: 'SubmitButton',
+  props: {
+  text: String,
+  disabled: Boolean,
+},
+  setup(__props) {
 
-script$c.render = render$c;
-script$c.__scopeId = "data-v-5bb3ed46";
-script$c.__file = "src/Buttons/SecondaryButton/SecondaryButton.vue";
 
-var script$b = defineComponent({
-  name: "DangerButton",
-  props: {
-    text: String,
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
-});
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("button", {
-    class: "danger-button",
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
-  }, toDisplayString(_ctx.text), 1 /* TEXT */))
+    class: "submit-button",
+    type: "submit",
+    disabled: __props.disabled
+  }, toDisplayString(__props.text), 9 /* TEXT, PROPS */, _hoisted_1$c))
+}
 }
 
-var css_248z$6 = "\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$6);
+};
 
-script$b.render = render$b;
-script$b.__scopeId = "data-v-5e080598";
-script$b.__file = "src/Buttons/DangerButton/DangerButton.vue";
+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);
 
-var script$a = defineComponent({
-  name: "TextInput",
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-  },
-  emits: ['update'],
-  methods: {
-    onInput(event) {
-      this.$emit('update', event.target.value);
-    },
-  },
-});
+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"];
 
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
+
+var script$b = {
+  __name: 'TextInput',
+  props: {
+  id: String,
+  required: Boolean,
+  disabled: Boolean,
+  placeholder: String,
+  label: String,
+  text: String,
+},
+  emits: ['update'],
+  setup(__props, { emit: __emit }) {
+
+
+const emit = __emit;
+const onInput = (event) => emit('update', event.target.value);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
     createElementVNode("label", {
       class: "text-input-label",
-      for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$5),
+      for: __props.id
+    }, toDisplayString(__props.label), 9 /* TEXT, PROPS */, _hoisted_2$5),
     createElementVNode("input", {
       class: "text-input-field",
-      id: _ctx.id,
-      name: _ctx.id,
-      required: _ctx.required,
-      disabled: _ctx.disabled,
-      placeholder: _ctx.placeholder,
-      value: _ctx.text,
-      onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
+      id: __props.id,
+      name: __props.id,
+      required: __props.required,
+      disabled: __props.disabled,
+      placeholder: __props.placeholder,
+      value: __props.text,
+      onInput: onInput,
       type: "text"
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3$4)
   ]))
 }
+}
 
-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);
+};
 
-script$a.render = render$a;
-script$a.__scopeId = "data-v-6df3547e";
-script$a.__file = "src/Inputs/TextInput/TextInput.vue";
+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);
 
-var script$9 = defineComponent({
-  name: "CheckBoxInput",
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    checked: {
-      type: Boolean,
-    },
-  },
-  emits: ['update'],
-  methods: {
-    onInput(event) {
-      this.$emit('update', event.target.value);
-    },
-  },
-});
+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"];
 
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$9, [
+
+var script$a = {
+  __name: 'CheckBoxInput',
+  props: {
+  id: String,
+  required: Boolean,
+  placeholder: String,
+  label: String,
+  checked: Boolean,
+},
+  emits: ['update'],
+  setup(__props, { emit: __emit }) {
+
+
+const emit = __emit;
+const onInput = (event) => emit('update', event.target.value);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("input", {
-      id: _ctx.id,
-      name: _ctx.id,
-      required: _ctx.required,
-      value: _ctx.checked,
-      onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
+      id: __props.id,
+      name: __props.id,
+      required: __props.required,
+      value: __props.checked,
+      onInput: onInput,
       type: "checkbox",
       "unchecked-value": "false"
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$4),
     createElementVNode("label", {
       class: "checkbox-label",
-      for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_3$3)
+      for: __props.id
+    }, toDisplayString(__props.label), 9 /* TEXT, PROPS */, _hoisted_3$3)
   ]))
 }
+}
 
-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);
+};
 
-script$9.render = render$9;
-script$9.__scopeId = "data-v-4612e592";
-script$9.__file = "src/Inputs/CheckBoxInput/CheckBoxInput.vue";
+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);
 
-var script$8 = defineComponent({
-  name: "NumberInput",
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    amount: {
-      type: Number,
-    },
-    min: {
-      type: String,
-    },
-    step: {
-      type: String,
-    },
-  },
-  emits: ['update'],
-  methods: {
-    onInput(event) {
-      this.$emit('update', event.target.value);
-    },
-  },
-});
+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"];
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
+
+var script$9 = {
+  __name: 'NumberInput',
+  props: {
+  id: String,
+  required: Boolean,
+  disabled: Boolean,
+  placeholder: String,
+  label: String,
+  amount: Number,
+  min: String,
+  step: String,
+},
+  emits: ['update'],
+  setup(__props, { emit: __emit }) {
+
+
+const emit = __emit;
+const onInput = (event) => emit('update', event.target.value);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$9, [
     createElementVNode("label", {
       class: "number-input-label",
-      for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$3),
+      for: __props.id
+    }, toDisplayString(__props.label), 9 /* TEXT, PROPS */, _hoisted_2$3),
     createElementVNode("input", {
       class: "number-input-field",
-      id: _ctx.id,
-      name: _ctx.id,
-      required: _ctx.required,
-      placeholder: _ctx.placeholder,
-      disabled: _ctx.disabled,
-      value: _ctx.amount,
-      min: _ctx.min,
-      step: _ctx.step,
-      onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
+      id: __props.id,
+      name: __props.id,
+      required: __props.required,
+      placeholder: __props.placeholder,
+      disabled: __props.disabled,
+      value: __props.amount,
+      min: __props.min,
+      step: __props.step,
+      onInput: onInput,
       type: "number"
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3$2)
   ]))
 }
+}
 
-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);
+};
 
-script$8.render = render$8;
-script$8.__scopeId = "data-v-26abc846";
-script$8.__file = "src/Inputs/NumberInput/NumberInput.vue";
+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);
 
-var script$7 = defineComponent({
-  name: "ImageInput",
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    dropPlaceholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    file: {
-      type: Object,
-    },
-  },
-  emits: ['update'],
-  methods: {
-    onInput(event) {
-      this.$emit('update', event.target.files[0]);
-    },
-  },
-});
+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"];
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+
+var script$8 = {
+  __name: 'ImageInput',
+  props: {
+  id: String,
+  required: Boolean,
+  placeholder: String,
+  dropPlaceholder: String,
+  label: String,
+  file: Object,
+},
+  emits: ['update'],
+  setup(__props, { emit: __emit }) {
+
+
+const emit = __emit;
+const onInput = (event) => emit('update', event.target.files[0]);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
     createElementVNode("label", {
       class: "image-input-label",
-      for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2$2),
+      for: __props.id
+    }, toDisplayString(__props.label), 9 /* TEXT, PROPS */, _hoisted_2$2),
     createElementVNode("input", {
       class: "image-input-field",
-      id: _ctx.id,
-      name: _ctx.id,
-      required: _ctx.required,
-      placeholder: _ctx.placeholder,
-      value: _ctx.file,
-      "drop-placeholder": _ctx.dropPlaceholder,
-      onInput: _cache[0] || (_cache[0] = (...args) => (_ctx.onInput && _ctx.onInput(...args))),
+      id: __props.id,
+      name: __props.id,
+      required: __props.required,
+      placeholder: __props.placeholder,
+      value: __props.file,
+      "drop-placeholder": __props.dropPlaceholder,
+      onInput: onInput,
       type: "file",
       accept: "image/*"
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3$1)
   ]))
 }
+}
 
-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.render = render$7;
-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) {
@@ -4881,157 +4818,122 @@ ImageBlobReduce.pica = pica;
 
 var imageBlobReduce = ImageBlobReduce;
 
-var script$6 = defineComponent({
-  name: "ResizeImageUpload",
-  components: {
-    ImageInput: script$7,
-  },
+const _hoisted_1$7 = { class: "image-input-container" };
+const _hoisted_2$1 = { key: 0 };
+
+
+var script$7 = {
+  __name: 'ResizeImageUpload',
   props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    dropPlaceholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    file: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      rawImage: null,
-      resizing: false,
-    };
-  },
+  id: String,
+  required: Boolean,
+  placeholder: String,
+  dropPlaceholder: String,
+  label: String,
+  file: Object,
+},
   emits: ['loaded', 'error'],
-  methods: {
-    async onInput(file) {
-      try {
-        this.resizing = true;
-        const reduce = new imageBlobReduce();
-        const blob = await reduce.toBlob(file, { max: 1024 });
-        const newFile = new File([blob], file.name, { type: file.type });
-        this.$emit('loaded', newFile);
-      } catch (err) {
-        this.$emit('error');
-      } finally {
-        this.resizing = false;
-      }
-    },
-  },
-});
+  setup(__props, { emit: __emit }) {
 
-const _hoisted_1$6 = { class: "image-input-container" };
-const _hoisted_2$1 = { key: 0 };
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_image_input = resolveComponent("image-input");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
-    createVNode(_component_image_input, {
-      id: _ctx.id,
-      name: _ctx.id,
-      required: _ctx.required,
-      placeholder: _ctx.placeholder,
-      "drop-placeholder": _ctx.dropPlaceholder,
-      label: _ctx.label,
-      onUpdate: _ctx.onInput
-    }, null, 8 /* PROPS */, ["id", "name", "required", "placeholder", "drop-placeholder", "label", "onUpdate"]),
-    (_ctx.resizing)
+const emit = __emit;
+const resizing = ref(false);
+
+const onInput = async (file) => {
+  try {
+    resizing.value = true;
+    const reduce = new imageBlobReduce();
+    const blob = await reduce.toBlob(file, { max: 1024 });
+    const newFile = new File([blob], file.name, { type: file.type });
+    emit('loaded', newFile);
+  } catch (err) {
+    emit('error');
+  } finally {
+    resizing.value = false;
+  }
+};
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+    createVNode(script$8, {
+      id: __props.id,
+      name: __props.id,
+      required: __props.required,
+      placeholder: __props.placeholder,
+      "drop-placeholder": __props.dropPlaceholder,
+      label: __props.label,
+      onUpdate: onInput
+    }, null, 8 /* PROPS */, ["id", "name", "required", "placeholder", "drop-placeholder", "label"]),
+    (resizing.value)
       ? (openBlock(), createElementBlock("p", _hoisted_2$1, "Resizing..."))
       : createCommentVNode("v-if", true)
   ]))
 }
+}
 
-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);
+};
 
-script$6.render = render$6;
-script$6.__scopeId = "data-v-3fb95754";
-script$6.__file = "src/Inputs/ResizeImageUpload/ResizeImageUpload.vue";
+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);
 
-var script$5 = defineComponent({
-  name: "Selector",
-  props: {
-    id: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    label: {
-      type: String,
-    },
-    initialValue: {
-      type: String,
-    },
-    options: {
-      type: Array,
-    },
-  },
-  data() {
-    return {
-      selected: '',
-    };
-  },
-  watch: {
-    initialValue: {
-      immediate: true,
-      handler: function (newSelectedValue) {
-        if (newSelectedValue !== "" && newSelectedValue !== undefined) {
-          this.selected = newSelectedValue;
-        }
-      },
-    },
-    options: {
-      immediate: true,
-      handler: function (newOptions) {
-        const enabledOptions = newOptions.filter((option) => !option.disabled);
-        if (enabledOptions.length === 1) {
-          this.selected = enabledOptions[0].value;
-          this.$emit('selected', this.selected);
-        }
-      },
-    },
-  },
-  emits: ['selected'],
-  methods: {
-    onChange() {
-      this.$emit('selected', this.selected);
-    },
-  },
-});
+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"];
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$5, [
+
+var script$6 = {
+  __name: 'Selector',
+  props: {
+  id: String,
+  disabled: Boolean,
+  label: String,
+  initialValue: String,
+  options: Array,
+},
+  emits: ['selected'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+
+const emit = __emit;
+const selected = ref('');
+
+watch(() => props.initialValue, (newVal) => {
+  if (newVal !== "" && newVal !== undefined) selected.value = newVal;
+}, { immediate: true });
+
+watch(() => props.options, (newOptions) => {
+  if (!newOptions) return;
+  const enabledOptions = newOptions.filter((o) => !o.disabled);
+  if (enabledOptions.length === 1) {
+    selected.value = enabledOptions[0].value;
+    emit('selected', selected.value);
+  }
+}, { immediate: true });
+
+const onChange = () => emit('selected', selected.value);
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
     createElementVNode("label", {
       class: "selector-label",
-      for: _ctx.id
-    }, toDisplayString(_ctx.label), 9 /* TEXT, PROPS */, _hoisted_2),
+      for: __props.id
+    }, toDisplayString(__props.label), 9 /* TEXT, PROPS */, _hoisted_2),
     createElementVNode("div", _hoisted_3, [
       withDirectives(createElementVNode("select", {
         class: "selector-field",
-        id: _ctx.id,
-        disabled: _ctx.disabled,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.selected) = $event)),
-        onChange: _cache[1] || (_cache[1] = (...args) => (_ctx.onChange && _ctx.onChange(...args)))
+        id: __props.id,
+        disabled: __props.disabled,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((selected).value = $event)),
+        onChange: onChange
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
           return (openBlock(), createElementBlock("option", {
             key: option.value,
             value: option.value,
@@ -5039,9 +4941,9 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
           }, toDisplayString(option.text), 9 /* TEXT, PROPS */, _hoisted_5))
         }), 128 /* KEYED_FRAGMENT */))
       ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_4), [
-        [vModelSelect, _ctx.selected]
+        [vModelSelect, selected.value]
       ]),
-      _cache[2] || (_cache[2] = createElementVNode("div", { class: "selector-icon-container" }, [
+      _cache[1] || (_cache[1] = createElementVNode("div", { class: "selector-icon-container" }, [
         createElementVNode("svg", {
           class: "selector-icon",
           xmlns: "http://www.w3.org/2000/svg",
@@ -5053,38 +4955,43 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]))
 }
+}
 
-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.render = render$5;
-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";
 
-var script$4 = {
-  name: 'DropIcon',
+const _hoisted_1$5 = ["width", "height", "stroke"];
+
+
+var script$5 = {
+  __name: 'DropIcon',
   props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-};
+},
+  setup(__props) {
 
-const _hoisted_1$4 = ["width", "height", "stroke"];
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: $props.size,
-    height: $props.size,
+    width: __props.size,
+    height: __props.size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: $props.color,
+    stroke: __props.color,
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
@@ -5092,36 +4999,41 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, _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.render = render$4;
-script$4.__file = "src/Icons/DropIcon/DropIcon.vue";
+script$5.__file = "src/Icons/DropIcon/DropIcon.vue";
 
-var script$3 = {
-  name: 'SkullIcon',
+const _hoisted_1$4 = ["width", "height", "stroke"];
+
+
+var script$4 = {
+  __name: 'SkullIcon',
   props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-};
+},
+  setup(__props) {
 
-const _hoisted_1$3 = ["width", "height", "stroke"];
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: $props.size,
-    height: $props.size,
+    width: __props.size,
+    height: __props.size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: $props.color,
+    stroke: __props.color,
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
@@ -5139,36 +5051,41 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       cy: "12",
       r: "1"
     }, null, -1 /* HOISTED */)
-  ]), 8 /* PROPS */, _hoisted_1$3))
+  ]), 8 /* PROPS */, _hoisted_1$4))
+}
 }
 
-script$3.render = render$3;
-script$3.__file = "src/Icons/SkullIcon/SkullIcon.vue";
+};
 
-var script$2 = {
-  name: 'CalendarIcon',
+script$4.__file = "src/Icons/SkullIcon/SkullIcon.vue";
+
+const _hoisted_1$3 = ["width", "height", "stroke"];
+
+
+var script$3 = {
+  __name: 'CalendarIcon',
   props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-};
+},
+  setup(__props) {
+
 
-const _hoisted_1$2 = ["width", "height", "stroke"];
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: $props.size,
-    height: $props.size,
+    width: __props.size,
+    height: __props.size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: $props.color,
+    stroke: __props.color,
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
@@ -5184,36 +5101,41 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       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.render = render$2;
-script$2.__file = "src/Icons/CalendarIcon/CalendarIcon.vue";
+script$3.__file = "src/Icons/CalendarIcon/CalendarIcon.vue";
 
-var script$1 = {
-  name: 'SaveIcon',
+const _hoisted_1$2 = ["width", "height", "stroke"];
+
+
+var script$2 = {
+  __name: 'SaveIcon',
   props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-};
+},
+  setup(__props) {
 
-const _hoisted_1$1 = ["width", "height", "stroke"];
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: $props.size,
-    height: $props.size,
+    width: __props.size,
+    height: __props.size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: $props.color,
+    stroke: __props.color,
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
@@ -5222,36 +5144,41 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     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.render = render$1;
-script$1.__file = "src/Icons/SaveIcon/SaveIcon.vue";
+};
 
-var script = {
-  name: 'CreateIcon',
+script$2.__file = "src/Icons/SaveIcon/SaveIcon.vue";
+
+const _hoisted_1$1 = ["width", "height", "stroke"];
+
+
+var script$1 = {
+  __name: 'CreateIcon',
   props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-};
+},
+  setup(__props) {
 
-const _hoisted_1 = ["width", "height", "stroke"];
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: $props.size,
-    height: $props.size,
+    width: __props.size,
+    height: __props.size,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: $props.color,
+    stroke: __props.color,
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
@@ -5270,11 +5197,82 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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 */)
+  ]))
+}
+}
+
+};
+
+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.render = render;
-script.__file = "src/Icons/CreateIcon/CreateIcon.vue";
+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$b as DangerButton, script$4 as DropIcon, script$7 as ImageInput, script$A as Loading, script$h as Modal, script$n as Navbar, script$8 as NumberInput, script$k as Pagination, script$f as RangeView, script$l as RegularButton, script$e as ResetButton, script$6 as ResizeImageUpload, script$1 as SaveIcon, script$c as SecondaryButton, script$B as SectionTitle, script$5 as Selector, script$3 as SkullIcon, script$g as Spinner, script$m as StyledTable, script$d 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