@namelivia/vue-components 4.2.1 → 4.3.1

package/.storybook/preview.js

@@ -1,14 +1,30 @@
-/** @type { import('@storybook/vue3-vite').Preview } */
 import '../styles/index.css';
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'one',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'one', title: 'One Theme' },
+        { value: 'another', title: 'Another Theme' },
+      ],
     },
   },
 };
 
-export default preview;
+export const decorators = [
+  (story, context) => {
+    const theme = context.globals.theme || 'one';
+
+    return {
+      components: { story },
+      template: `<div :class="theme + '-theme'"><story /></div>`,
+      setup() {
+        return { theme };
+      },
+    };
+  },
+];

package/dist/index.esm.js

@@ -10,10 +10,10 @@ var script$v = 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 (openBlock(), createElementBlock("h1", _hoisted_1$p, toDisplayString(_ctx.text), 1 /* TEXT */))
+  return (openBlock(), createElementBlock("h1", _hoisted_1$q, toDisplayString(_ctx.text), 1 /* TEXT */))
 }
 
 function styleInject(css, ref) {
@@ -92,14 +92,14 @@ var script$t = defineComponent({
   },
 });
 
-const _hoisted_1$o = ["src", "alt"];
+const _hoisted_1$p = ["src", "alt"];
 
 function render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), 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";
@@ -116,12 +116,12 @@ var script$s = 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 (openBlock(), createElementBlock("div", _hoisted_1$n, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$o, [
     createElementVNode("div", _hoisted_2$e, toDisplayString(_ctx.title), 1 /* TEXT */),
     createElementVNode("p", _hoisted_3$9, [
       renderSlot(_ctx.$slots, "default")
@@ -153,7 +153,7 @@ var script$r = defineComponent({
   emits: ['width']
 });
 
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   key: 0,
   class: "card-container"
 };
@@ -164,7 +164,7 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_card_body = resolveComponent("card-body");
 
   return (!_ctx.dismissed)
-    ? (openBlock(), createElementBlock("div", _hoisted_1$m, [
+    ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$d, [
           createVNode(_component_card_image, {
             src: _ctx.image,
@@ -193,10 +193,10 @@ var script$q = 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 (openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$m, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -212,10 +212,10 @@ var script$p = 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 (openBlock(), createElementBlock("div", _hoisted_1$k, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$l, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -247,20 +247,23 @@ var script$o = 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 (openBlock(), createElementBlock("a", {
-    href: _ctx.href,
+    href: _ctx.linkDestination,
     class: normalizeClass(_ctx.linkClass),
     "aria-current": "page"
-  }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$j))
+  }, 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;
@@ -283,7 +286,7 @@ var script$n = defineComponent({
   },
 });
 
-const _hoisted_1$i = {
+const _hoisted_1$j = {
   key: 0,
   id: "mobile-menu"
 };
@@ -302,14 +305,15 @@ function render$n(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [
       (_ctx.open)
-        ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
+        ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
             createElementVNode("div", _hoisted_2$c, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link) => {
                 return (openBlock(), 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 */))
             ])
           ]))
@@ -319,7 +323,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;
@@ -346,20 +350,23 @@ var script$m = 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 (openBlock(), createElementBlock("a", {
-    href: _ctx.href,
+    href: _ctx.linkDestination,
     class: normalizeClass(_ctx.linkClass),
     "aria-current": "page"
-  }, toDisplayString(_ctx.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_1$h))
+  }, 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;
@@ -378,20 +385,21 @@ var script$l = 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 = resolveComponent("navigation-link");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$g, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$h, [
     createElementVNode("div", _hoisted_2$b, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link) => {
         return (openBlock(), 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 */))
     ])
   ]))
@@ -422,7 +430,7 @@ var script$k = defineComponent({
   }
 });
 
-const _hoisted_1$f = ["href"];
+const _hoisted_1$g = ["href"];
 const _hoisted_2$a = ["src", "alt"];
 const _hoisted_3$8 = ["src", "alt"];
 
@@ -441,7 +449,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";
@@ -474,11 +482,11 @@ var script$j = 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 (openBlock(), createElementBlock("div", _hoisted_1$e, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$f, [
     createElementVNode("img", {
       class: "circle-image",
       src: _ctx.currentUserPicture,
@@ -487,7 +495,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;
@@ -533,7 +541,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;
@@ -587,7 +595,7 @@ var script$h = 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" };
@@ -600,7 +608,7 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_right_content = resolveComponent("right-content");
   const _component_mobile_navigation_links = resolveComponent("mobile-navigation-links");
 
-  return (openBlock(), createElementBlock("nav", _hoisted_1$d, [
+  return (openBlock(), createElementBlock("nav", _hoisted_1$e, [
     createElementVNode("div", _hoisted_2$8, [
       createElementVNode("div", _hoisted_3$7, [
         createElementVNode("div", _hoisted_4$2, [
@@ -633,7 +641,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;
@@ -644,10 +652,10 @@ var script$g = 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 (openBlock(), createElementBlock("table", _hoisted_1$c, [
+  return (openBlock(), createElementBlock("table", _hoisted_1$d, [
     renderSlot(_ctx.$slots, "default")
   ]))
 }
@@ -663,8 +671,24 @@ var script$f = 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);
@@ -672,14 +696,17 @@ var script$f = defineComponent({
   },
 });
 
+const _hoisted_1$c = ["disabled"];
+
 function render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("button", {
-    class: "regular-button",
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args)))
-  }, toDisplayString(_ctx.text), 1 /* TEXT */))
+    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$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;