@namelivia/vue-components 4.1.0 → 4.2.0

package/dist/index.esm.js

@@ -43,8 +43,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$n = "\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$n);
+var css_248z$v = "\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$v);
 
 script$v.render = render$v;
 script$v.__scopeId = "data-v-0375af86";
@@ -63,8 +63,8 @@ function render$u(_ctx, _cache, $props, $setup, $data, $options) {
   ])))
 }
 
-var css_248z$m = "\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: 50%;\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$m);
+var css_248z$u = "\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$u);
 
 script$u.render = render$u;
 script$u.__scopeId = "data-v-7a9a3040";
@@ -96,14 +96,17 @@ const _hoisted_1$o = ["src", "alt"];
 
 function render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("img", {
-    class: "w-full",
     src: _ctx.src,
     alt: _ctx.alt,
     ref: "image"
   }, null, 8 /* PROPS */, _hoisted_1$o))
 }
 
+var css_248z$t = "\nimg[data-v-5fa6a3f6] {\n      width: 100%;\n}\n";
+styleInject(css_248z$t);
+
 script$t.render = render$t;
+script$t.__scopeId = "data-v-5fa6a3f6";
 script$t.__file = "src/Card/CardImage.vue";
 
 var script$s = defineComponent({
@@ -126,8 +129,8 @@ function render$s(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$l = "\n.card-body[data-v-c140cd30] {\n  padding: 1.5rem 1.5rem;\n}\n.card-title[data-v-c140cd30] {\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-large);\n  margin-bottom: 0.5rem;\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$l);
+var css_248z$s = "\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$s);
 
 script$s.render = render$s;
 script$s.__scopeId = "data-v-c140cd30";
@@ -179,8 +182,8 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
     : createCommentVNode("v-if", true)
 }
 
-var css_248z$k = "\n.card-container[data-v-da3858b4] {\n  margin: 2rem;\n}\n.card[data-v-da3858b4] {\n  max-width: 24rem;\n  border-radius: 0.375rem;\n  overflow: hidden;\n  box-shadow: 0 4px 6px var(--color-card-shadow);\n}\n";
-styleInject(css_248z$k);
+var css_248z$r = "\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$r);
 
 script$r.render = render$r;
 script$r.__scopeId = "data-v-da3858b4";
@@ -198,8 +201,8 @@ function render$q(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$j = "\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$j);
+var css_248z$q = "\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$q);
 
 script$q.render = render$q;
 script$q.__scopeId = "data-v-ad060034";
@@ -217,8 +220,8 @@ function render$p(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$i = "\n.container[data-v-7cccf06a] {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n";
-styleInject(css_248z$i);
+var css_248z$p = "\n.container[data-v-7cccf06a] {\n  max-width: var(--container-max-width);\n  margin: var(--container-margin);\n}\n";
+styleInject(css_248z$p);
 
 script$p.render = render$p;
 script$p.__scopeId = "data-v-7cccf06a";
@@ -240,9 +243,9 @@ var script$o = defineComponent({
   computed: {
     linkClass: function () {
       if (this.current) {
-        return 'bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium'
+        return 'current-link'
       }
-      return 'text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium'
+      return 'regular-link'
     },
   },
 });
@@ -257,7 +260,11 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
   }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$j))
 }
 
+var css_248z$o = "\n.current-link[data-v-3e279546] {\n  background-color: #111827;\n  color: #ffffff;\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: 1rem;\n  font-weight: 500;\n}\n.regular-link[data-v-3e279546] {\n  color: #d1d5db;\n  display: block;\n  padding: 0.5rem 0.75rem;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  font-weight: 500;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.regular-link[data-v-3e279546]:hover {\n  background-color: #374151;\n  color: #ffffff;\n}\n";
+styleInject(css_248z$o);
+
 script$o.render = render$o;
+script$o.__scopeId = "data-v-3e279546";
 script$o.__file = "src/Navbar/MobileNavigationLink.vue";
 
 var script$n = defineComponent({
@@ -278,21 +285,20 @@ var script$n = defineComponent({
 
 const _hoisted_1$i = {
   key: 0,
-  class: "sm:hidden",
   id: "mobile-menu"
 };
-const _hoisted_2$c = { class: "px-2 pt-2 pb-3 space-y-1" };
+const _hoisted_2$c = { class: "menu-panel" };
 
 function render$n(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_mobile_navigation_link = resolveComponent("mobile-navigation-link");
 
   return (openBlock(), createBlock(Transition, {
-    "enter-active-class": "transition-all",
-    "leave-active-class": "transition-all",
-    "enter-class": "opacity-0 scale-70",
-    "enter-to-class": "opacity-100 scale-100",
-    "leave-class": "opacity-100 scale-100",
-    "leave-to-class": "opacity-0 scale-70"
+    "enter-active-class": "fade-scale-enter-active",
+    "leave-active-class": "fade-scale-leave-active",
+    "enter-from-class": "fade-scale-enter-from",
+    "enter-to-class": "fade-scale-enter-to",
+    "leave-from-class": "fade-scale-leave-from",
+    "leave-to-class": "fade-scale-leave-to"
   }, {
     default: withCtx(() => [
       (_ctx.open)
@@ -313,7 +319,11 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
   }))
 }
 
+var css_248z$n = "\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  opacity: 0;\n  transform: scale(0.7);\n}\n.fade-scale-enter-to[data-v-eb1296c6],\n.fade-scale-leave-from[data-v-eb1296c6] {\n  opacity: 1;\n  transform: scale(1);\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}\n@media (min-width: 640px) {\n#mobile-menu[data-v-eb1296c6] {\n    display: none;\n}\n}\n";
+styleInject(css_248z$n);
+
 script$n.render = render$n;
+script$n.__scopeId = "data-v-eb1296c6";
 script$n.__file = "src/Navbar/MobileNavigationLinks.vue";
 
 var script$m = defineComponent({
@@ -332,9 +342,9 @@ var script$m = defineComponent({
   computed: {
     linkClass: function () {
       if (this.current) {
-        return 'bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium'
+        return 'current-link'
       }
-      return 'text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'
+      return 'regular-link'
     },
   },
 });
@@ -349,7 +359,11 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$h))
 }
 
+var css_248z$m = "\n.current-link[data-v-4989b384] {\n  background-color: #111827;\n  color: #ffffff;\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: 0.875rem;\n}\n.regular-link[data-v-4989b384] {\n  color: #d1d5db;\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: 0.875rem;\n  font-weight: 500;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.regular-link[data-v-4989b384]:hover {\n  background-color: #374151;\n  color: #ffffff;\n}\n";
+styleInject(css_248z$m);
+
 script$m.render = render$m;
+script$m.__scopeId = "data-v-4989b384";
 script$m.__file = "src/Navbar/NavigationLink.vue";
 
 var script$l = defineComponent({
@@ -364,8 +378,8 @@ var script$l = defineComponent({
   },
 });
 
-const _hoisted_1$g = { class: "hidden sm:block sm:ml-6" };
-const _hoisted_2$b = { class: "flex space-x-4" };
+const _hoisted_1$g = { class: "links-container" };
+const _hoisted_2$b = { class: "links-wrapper" };
 
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_navigation_link = resolveComponent("navigation-link");
@@ -383,7 +397,11 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
+var css_248z$l = "\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$l);
+
 script$l.render = render$l;
+script$l.__scopeId = "data-v-294f43c2";
 script$l.__file = "src/Navbar/NavigationLinks.vue";
 
 var script$k = defineComponent({
@@ -410,23 +428,27 @@ const _hoisted_3$8 = ["src", "alt"];
 
 function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("a", {
-    class: "flex-shrink-0 flex items-center",
+    class: "title-container",
     href: _ctx.href
   }, [
     createElementVNode("img", {
-      class: "block lg:hidden h-8 w-auto",
+      class: "logo-small",
       src: _ctx.imageSmall,
       alt: _ctx.title
     }, null, 8 /* PROPS */, _hoisted_2$a),
     createElementVNode("img", {
-      class: "hidden lg:block h-8 w-auto",
+      class: "logo-big",
       src: _ctx.imageBig,
       alt: _ctx.title
     }, null, 8 /* PROPS */, _hoisted_3$8)
   ], 8 /* PROPS */, _hoisted_1$f))
 }
 
+var css_248z$k = "\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$k);
+
 script$k.render = render$k;
+script$k.__scopeId = "data-v-661ef87c";
 script$k.__file = "src/Navbar/NavbarTitle.vue";
 
 var script$j = defineComponent({
@@ -452,21 +474,24 @@ var script$j = defineComponent({
   },
 });
 
-const _hoisted_1$e = { class: "absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0" };
+const _hoisted_1$e = { class: "action-container" };
 const _hoisted_2$9 = ["src", "alt"];
 
 function render$j(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$e, [
     createElementVNode("img", {
-      class: "rounded-full p-1",
-      style: {"height":"50px"},
+      class: "circle-image",
       src: _ctx.currentUserPicture,
       alt: _ctx.avatarAlt
     }, null, 8 /* PROPS */, _hoisted_2$9)
   ]))
 }
 
+var css_248z$j = "\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}\n.circle-image[data-v-07675a13] {\n  border-radius: 9999px;\n  padding: 0.25rem;\n  height: 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$j);
+
 script$j.render = render$j;
+script$j.__scopeId = "data-v-07675a13";
 script$j.__file = "src/Navbar/RightContent.vue";
 
 var script$i = defineComponent({
@@ -508,8 +533,8 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
   ])))
 }
 
-var css_248z$h = "\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: 0.375rem;\n  color: var(--color-menu-button);\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-button[data-v-397545ee]:hover {\n  color: var(--color-menu-button-text-hover);\n  background-color: var(--color-menu-button-hover);\n}\n.menu-button[data-v-397545ee]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-menu-button-shadow-focus);\n}\n.menu-icon[data-v-397545ee] {\n  display: block;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n";
-styleInject(css_248z$h);
+var css_248z$i = "\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-menu-button);\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-button[data-v-397545ee]:hover {\n  color: var(--color-menu-button-text-hover);\n  background-color: var(--color-menu-button-hover);\n}\n.menu-button[data-v-397545ee]:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--color-menu-button-shadow-focus);\n}\n.menu-icon[data-v-397545ee] {\n  display: block;\n  height: 1.5rem;\n  width: 1.5rem;\n}\n";
+styleInject(css_248z$i);
 
 script$i.render = render$i;
 script$i.__scopeId = "data-v-397545ee";
@@ -562,11 +587,11 @@ var script$h = defineComponent({
   }
 });
 
-const _hoisted_1$d = { class: "bg-gray-800" };
-const _hoisted_2$8 = { class: "max-w-7xl mx-auto px-2 sm:px-6 lg:px-8" };
-const _hoisted_3$7 = { class: "relative flex items-center justify-between h-16" };
-const _hoisted_4$2 = { class: "absolute inset-y-0 left-0 flex items-center sm:hidden" };
-const _hoisted_5$1 = { class: "flex-1 flex items-center justify-center sm:items-stretch sm:justify-start" };
+const _hoisted_1$d = { class: "navbar" };
+const _hoisted_2$8 = { class: "navbar-container" };
+const _hoisted_3$7 = { class: "flex-header" };
+const _hoisted_4$2 = { class: "menu-toggle" };
+const _hoisted_5$1 = { class: "title-container" };
 
 function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_mobile_menu_button = resolveComponent("mobile-menu-button");
@@ -608,7 +633,11 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
+var css_248z$h = "\n.navbar[data-v-1b5caf34] {\n  background-color: #1f2937;\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$h);
+
 script$h.render = render$h;
+script$h.__scopeId = "data-v-1b5caf34";
 script$h.__file = "src/Navbar/Navbar.vue";
 
 var script$g = defineComponent({
@@ -650,7 +679,7 @@ function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   }, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-var css_248z$f = "\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: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n.regular-button[data-v-7c962c54]:hover {\n  background-color: var(--color-regular-hover);\n}\n";
+var css_248z$f = "\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";
 styleInject(css_248z$f);
 
 script$f.render = render$f;
@@ -713,7 +742,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("span", _hoisted_1$a, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-var css_248z$d = "\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: 0.5rem;\n  padding: 0.125rem 0.625rem;\n  border-radius: 0.25rem;\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";
+var css_248z$d = "\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$d);
 
 script$d.render = render$d;
@@ -764,7 +793,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
     : 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: 0.375rem;\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";
+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$c.render = render$c;
@@ -786,7 +815,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   ])))
 }
 
-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: 50%;\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";
+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$b.render = render$b;
@@ -845,7 +874,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("button", _hoisted_1$6, 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: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n.reset-button[data-v-70384d7c]:hover {\n  background-color: var(--color-reset-hover);\n}\n";
+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$9.render = render$9;
@@ -874,7 +903,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, toDisplayString(_ctx.text), 9 /* TEXT, PROPS */, _hoisted_1$5))
 }
 
-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: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\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.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$8);
 
 script$8.render = render$8;
@@ -901,7 +930,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }, 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: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n.secondary-button[data-v-5bb3ed46]:hover {\n  background-color: var(--color-secondary-hover);\n}\n";
+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);
 
 script$7.render = render$7;
@@ -928,7 +957,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   }, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
-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: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n.danger-button[data-v-5e080598]:hover {\n  background-color: var(--color-danger-hover);\n}\n";
+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$6.render = render$6;
@@ -989,7 +1018,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-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: 0.25rem;\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";
+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$5.render = render$5;
@@ -1114,7 +1143,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-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: 0.25rem;\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";
+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$3.render = render$3;
@@ -1176,7 +1205,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-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: 0.25rem;\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";
+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);
 
 script$2.render = render$2;
@@ -4838,7 +4867,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8 /* PROPS */, ["id", "name", "required", "placeholder", "drop-placeholder", "label", "onUpdate"]))
 }
 
-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: 0.25rem;\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";
+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$1.render = render$1;
@@ -4940,7 +4969,7 @@ function render(_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: 0.25rem;\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";
+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);
 
 script.render = render;