@namelivia/vue-components 4.2.1 → 4.3.1

package/dist/index.js

@@ -12,10 +12,10 @@ var script$v = vue.defineComponent({
   }
 });
 
-const _hoisted_1$p = { class: "section-title" };
+const _hoisted_1$q = { class: "section-title" };
 
 function render$v(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("h1", _hoisted_1$p, vue.toDisplayString(_ctx.text), 1 /* TEXT */))
+  return (vue.openBlock(), vue.createElementBlock("h1", _hoisted_1$q, vue.toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
 function styleInject(css, ref) {
@@ -94,14 +94,14 @@ var script$t = vue.defineComponent({
   },
 });
 
-const _hoisted_1$o = ["src", "alt"];
+const _hoisted_1$p = ["src", "alt"];
 
 function render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("img", {
     src: _ctx.src,
     alt: _ctx.alt,
     ref: "image"
-  }, null, 8 /* PROPS */, _hoisted_1$o))
+  }, null, 8 /* PROPS */, _hoisted_1$p))
 }
 
 var css_248z$t = "\nimg[data-v-5fa6a3f6] {\n      width: 100%;\n}\n";
@@ -118,12 +118,12 @@ var script$s = vue.defineComponent({
   },
 });
 
-const _hoisted_1$n = { class: "card-body" };
+const _hoisted_1$o = { class: "card-body" };
 const _hoisted_2$e = { class: "card-title" };
 const _hoisted_3$9 = { class: "card-text" };
 
 function render$s(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
     vue.createElementVNode("div", _hoisted_2$e, vue.toDisplayString(_ctx.title), 1 /* TEXT */),
     vue.createElementVNode("p", _hoisted_3$9, [
       vue.renderSlot(_ctx.$slots, "default")
@@ -155,7 +155,7 @@ var script$r = vue.defineComponent({
   emits: ['width']
 });
 
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   key: 0,
   class: "card-container"
 };
@@ -166,7 +166,7 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_card_body = vue.resolveComponent("card-body");
 
   return (!_ctx.dismissed)
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
         vue.createElementVNode("div", _hoisted_2$d, [
           vue.createVNode(_component_card_image, {
             src: _ctx.image,
@@ -195,10 +195,10 @@ var script$q = vue.defineComponent({
   name: "CardGrid"
 });
 
-const _hoisted_1$l = { class: "card-grid" };
+const _hoisted_1$m = { class: "card-grid" };
 
 function render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
     vue.renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -214,10 +214,10 @@ var script$p = vue.defineComponent({
   name: "Container"
 });
 
-const _hoisted_1$k = { class: "container" };
+const _hoisted_1$l = { class: "container" };
 
 function render$p(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
     vue.renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -249,20 +249,23 @@ var script$o = vue.defineComponent({
       }
       return 'regular-link'
     },
+    linkDestination: function () {
+      return this.current ? '#' : this.href
+    },
   },
 });
 
-const _hoisted_1$j = ["href"];
+const _hoisted_1$k = ["href"];
 
 function render$o(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("a", {
-    href: _ctx.href,
+    href: _ctx.linkDestination,
     class: vue.normalizeClass(_ctx.linkClass),
     "aria-current": "page"
-  }, vue.toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$j))
+  }, vue.toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$k))
 }
 
-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";
+var css_248z$o = "\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$o);
 
 script$o.render = render$o;
@@ -285,7 +288,7 @@ var script$n = vue.defineComponent({
   },
 });
 
-const _hoisted_1$i = {
+const _hoisted_1$j = {
   key: 0,
   id: "mobile-menu"
 };
@@ -304,14 +307,15 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(() => [
       (_ctx.open)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
             vue.createElementVNode("div", _hoisted_2$c, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.links, (link) => {
                 return (vue.openBlock(), vue.createBlock(_component_mobile_navigation_link, {
                   key: link.id,
                   href: link.href,
-                  text: link.text
-                }, null, 8 /* PROPS */, ["href", "text"]))
+                  text: link.text,
+                  current: link.current
+                }, null, 8 /* PROPS */, ["href", "text", "current"]))
               }), 128 /* KEYED_FRAGMENT */))
             ])
           ]))
@@ -321,7 +325,7 @@ 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  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: #1f2937;\n}\n@media (min-width: 640px) {\n#mobile-menu[data-v-eb1296c6] {\n    display: none;\n}\n}\n";
+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  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$n);
 
 script$n.render = render$n;
@@ -348,20 +352,23 @@ var script$m = vue.defineComponent({
       }
       return 'regular-link'
     },
+    linkDestination: function () {
+      return this.current ? '#' : this.href
+    },
   },
 });
 
-const _hoisted_1$h = ["href"];
+const _hoisted_1$i = ["href"];
 
 function render$m(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("a", {
-    href: _ctx.href,
+    href: _ctx.linkDestination,
     class: vue.normalizeClass(_ctx.linkClass),
     "aria-current": "page"
-  }, vue.toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$h))
+  }, vue.toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$i))
 }
 
-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";
+var css_248z$m = "\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$m);
 
 script$m.render = render$m;
@@ -380,20 +387,21 @@ var script$l = vue.defineComponent({
   },
 });
 
-const _hoisted_1$g = { class: "links-container" };
+const _hoisted_1$h = { class: "links-container" };
 const _hoisted_2$b = { class: "links-wrapper" };
 
 function render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_navigation_link = vue.resolveComponent("navigation-link");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
     vue.createElementVNode("div", _hoisted_2$b, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.links, (link) => {
         return (vue.openBlock(), vue.createBlock(_component_navigation_link, {
           key: link.id,
           href: link.href,
-          text: link.text
-        }, null, 8 /* PROPS */, ["href", "text"]))
+          text: link.text,
+          current: link.current
+        }, null, 8 /* PROPS */, ["href", "text", "current"]))
       }), 128 /* KEYED_FRAGMENT */))
     ])
   ]))
@@ -424,7 +432,7 @@ var script$k = vue.defineComponent({
   }
 });
 
-const _hoisted_1$f = ["href"];
+const _hoisted_1$g = ["href"];
 const _hoisted_2$a = ["src", "alt"];
 const _hoisted_3$8 = ["src", "alt"];
 
@@ -443,7 +451,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
       src: _ctx.imageBig,
       alt: _ctx.title
     }, null, 8 /* PROPS */, _hoisted_3$8)
-  ], 8 /* PROPS */, _hoisted_1$f))
+  ], 8 /* PROPS */, _hoisted_1$g))
 }
 
 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";
@@ -476,11 +484,11 @@ var script$j = vue.defineComponent({
   },
 });
 
-const _hoisted_1$e = { class: "action-container" };
+const _hoisted_1$f = { class: "action-container" };
 const _hoisted_2$9 = ["src", "alt"];
 
 function render$j(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
     vue.createElementVNode("img", {
       class: "circle-image",
       src: _ctx.currentUserPicture,
@@ -489,7 +497,7 @@ function render$j(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-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";
+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  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$j);
 
 script$j.render = render$j;
@@ -535,7 +543,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
   ])))
 }
 
-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";
+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-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$i);
 
 script$i.render = render$i;
@@ -589,7 +597,7 @@ var script$h = vue.defineComponent({
   }
 });
 
-const _hoisted_1$d = { class: "navbar" };
+const _hoisted_1$e = { class: "navbar" };
 const _hoisted_2$8 = { class: "navbar-container" };
 const _hoisted_3$7 = { class: "flex-header" };
 const _hoisted_4$2 = { class: "menu-toggle" };
@@ -602,7 +610,7 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_right_content = vue.resolveComponent("right-content");
   const _component_mobile_navigation_links = vue.resolveComponent("mobile-navigation-links");
 
-  return (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$d, [
+  return (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$e, [
     vue.createElementVNode("div", _hoisted_2$8, [
       vue.createElementVNode("div", _hoisted_3$7, [
         vue.createElementVNode("div", _hoisted_4$2, [
@@ -635,7 +643,7 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$h = "\n.navbar[data-v-1b5caf34] {\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  background-color: #1f2937;\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";
+var css_248z$h = "\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$h);
 
 script$h.render = render$h;
@@ -646,10 +654,10 @@ var script$g = vue.defineComponent({
   name: "StyledTable",
 });
 
-const _hoisted_1$c = { class: "styled-table" };
+const _hoisted_1$d = { class: "styled-table" };
 
 function render$g(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("table", _hoisted_1$c, [
+  return (vue.openBlock(), vue.createElementBlock("table", _hoisted_1$d, [
     vue.renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -665,8 +673,24 @@ var script$f = vue.defineComponent({
   name: "RegularButton",
   props: {
     text: String,
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    textWhileLoading: {
+      type: String,
+      default: '...',
+    },
   },
   emits: ['click'],
+  computed: {
+    cssClass: function () {
+      if (this.loading) {
+        return 'regular-button loading';
+      }
+      return 'regular-button'
+    },
+  },
   methods: {
     onClick(evt) {
       this.$emit('click', evt);
@@ -674,14 +698,17 @@ var script$f = vue.defineComponent({
   },
 });
 
+const _hoisted_1$c = ["disabled"];
+
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("button", {
-    class: "regular-button",
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
-  }, vue.toDisplayString(_ctx.text), 1 /* TEXT */))
+    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args))),
+    class: vue.normalizeClass(_ctx.cssClass),
+    disabled: _ctx.loading
+  }, vue.toDisplayString(_ctx.loading ? _ctx.textWhileLoading : _ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$c))
 }
 
-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";
+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\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$f);
 
 script$f.render = render$f;