@vlalg-nimbus/nb-buttons 2.0.4 → 2.0.6

package/dist/nb-buttons.js

@@ -1,10 +1,10 @@
-import { useCssVars as F, toRefs as M, computed as t, openBlock as T, createElementBlock as L, normalizeClass as X, normalizeStyle as w, createElementVNode as R, renderSlot as q, createTextVNode as G, createCommentVNode as A, unref as ae, withModifiers as de, toDisplayString as te, onMounted as se, ref as ie, watch as ce } from "vue";
-const j = (e, s) => {
-  const B = e.__vccOpts || e;
-  for (const [C, b] of s)
-    B[C] = b;
-  return B;
-}, fe = ["id"], ve = { class: "component-content__text" }, be = /* @__PURE__ */ Object.assign({
+import { useCssVars as M, toRefs as j, computed as t, openBlock as D, createElementBlock as O, normalizeClass as R, normalizeStyle as N, createElementVNode as k, renderSlot as T, createTextVNode as A, createCommentVNode as L, unref as te, withModifiers as re, onMounted as de, ref as se, watch as ie, pushScopeId as ce, popScopeId as fe } from "vue";
+const q = (e, s) => {
+  const w = e.__vccOpts || e;
+  for (const [V, b] of s)
+    w[V] = b;
+  return w;
+}, ve = ["id"], be = { class: "component-content__text" }, pe = /* @__PURE__ */ Object.assign({
   name: "NbButtonVavaGame",
   inheritAttrs: !1
 }, {
@@ -93,102 +93,102 @@ const j = (e, s) => {
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((u) => ({
-      "4348b976": H.value,
-      "1735afec": Y.value,
-      "58e23cb0": z.value,
-      "451672cd": d.value,
-      "55b7ee16": n.value
+    const w = e;
+    M((c) => ({
+      "859731ae": n.value,
+      "101619df": X.value,
+      "90f5dac6": z.value,
+      f0f7a800: Y.value,
+      33084168: r.value
     }));
     const {
-      display: C,
+      display: V,
       textColor: b,
-      textColorHover: x,
+      textColorHover: m,
       buttonColor: p,
       buttonColorHover: y,
-      uppercase: v,
-      paddingXContent: V,
-      paddingYContent: g,
-      paddingXBorder: N,
-      paddingYBorder: i,
-      borderColor: c,
-      borderOpacity: m,
-      disabled: l,
-      fontFamily: S,
-      fontSize: $,
+      uppercase: _,
+      paddingXContent: g,
+      paddingYContent: x,
+      paddingXBorder: C,
+      paddingYBorder: f,
+      borderColor: i,
+      borderOpacity: u,
+      disabled: v,
+      fontFamily: $,
+      fontSize: B,
       fontWeight: h
-    } = M(B), _ = t(() => {
-      const u = l.value ? "component-disabled" : "", I = C.value !== "b" ? "inline-block" : "block", D = b.value ? b.value : "#ece8e1", O = p.value ? p.value : "green", P = x.value ? x.value : "#ece8e1", E = y.value ? y.value : "cyan", J = c.value ? c.value : "#ffffff", K = !m.value || !(m.value >= 0 && m.value <= 1) ? "0.5" : m.value, Q = !N.value || N.value < 0 ? 0.3 : N.value, U = !i.value || i.value < 0 ? 0.3 : i.value, Z = !V.value || V.value < 0 ? 0.5 : V.value, oe = !g.value || g.value < 0 ? 0.5 : g.value, le = v.value ? "uppercase" : "none", ne = S.value ? S.value : "'Lato', sans-serif", ue = $.value ? $.value : "1.6em", re = !h.value || h.value < 0 ? 100 : h.value;
+    } = j(w), S = t(() => {
+      const c = v.value ? "component-disabled" : "", I = V.value !== "b" ? "inline-block" : "block", P = b.value ? b.value : "#ece8e1", F = p.value ? p.value : "green", G = m.value ? m.value : "#ece8e1", E = y.value ? y.value : "cyan", J = i.value ? i.value : "#ffffff", K = !u.value || !(u.value >= 0 && u.value <= 1) ? "0.5" : u.value, Q = !C.value || C.value < 0 ? 0.3 : C.value, U = !f.value || f.value < 0 ? 0.3 : f.value, Z = !g.value || g.value < 0 ? 0.5 : g.value, ae = !x.value || x.value < 0 ? 0.5 : x.value, oe = _.value ? "uppercase" : "none", le = $.value ? $.value : "'Lato', sans-serif", ne = B.value ? B.value : "1.6em", ue = !h.value || h.value < 0 ? 100 : h.value;
       return {
-        disabled: u,
+        disabled: c,
         display: I,
-        textColor: D,
-        buttonColor: O,
-        textColorHover: P,
+        textColor: P,
+        buttonColor: F,
+        textColorHover: G,
         buttonColorHover: E,
         borderColor: J,
         borderOpacity: K,
         paddingXBorder: Q,
         paddingYBorder: U,
         paddingXContent: Z,
-        paddingYContent: oe,
-        uppercase: le,
-        font: ne,
-        fontSize: ue,
-        fontWeight: re
+        paddingYContent: ae,
+        uppercase: oe,
+        font: le,
+        fontSize: ne,
+        fontWeight: ue
       };
-    }), f = t(() => _.value.disabled), r = t(() => ({
-      display: _.value.display
-    })), k = t(() => {
-      const u = _.value;
+    }), o = t(() => S.value.disabled), H = t(() => ({
+      display: S.value.display
+    })), d = t(() => {
+      const c = S.value;
       return {
-        padding: `${u.paddingYBorder}rem ${u.paddingXBorder}rem`,
-        fontSize: u.fontSize,
-        fontWeight: u.fontWeight
+        padding: `${c.paddingYBorder}rem ${c.paddingXBorder}rem`,
+        fontSize: c.fontSize,
+        fontWeight: c.fontWeight
       };
-    }), a = t(() => {
-      const u = _.value;
+    }), l = t(() => {
+      const c = S.value;
       return {
-        textTransform: u.uppercase,
-        padding: `${u.paddingYContent}rem ${u.paddingXContent}rem`,
-        backgroundColor: u.buttonColor
+        textTransform: c.uppercase,
+        padding: `${c.paddingYContent}rem ${c.paddingXContent}rem`,
+        backgroundColor: c.buttonColor
       };
-    }), o = t(() => ({
-      backgroundColor: _.value.buttonColorHover
-    })), H = t(() => _.value.font), d = t(() => _.value.borderColor), n = t(() => _.value.borderOpacity), Y = t(() => _.value.textColor), z = t(() => _.value.textColorHover), W = () => {
+    }), a = t(() => ({
+      backgroundColor: S.value.buttonColorHover
+    })), n = t(() => S.value.font), Y = t(() => S.value.borderColor), r = t(() => S.value.borderOpacity), X = t(() => S.value.textColor), z = t(() => S.value.textColorHover), W = () => {
       s("clicked");
     };
-    return (u, I) => e.nbId ? (T(), L("div", {
+    return (c, I) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", f.value]),
-      style: w([r.value]),
+      class: R(["nb-wrapper", o.value]),
+      style: N([H.value]),
       onClick: W
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component"]),
-        style: w([k.value])
+        class: R(["nb-reset", "component"]),
+        style: N([d.value])
       }, [
-        R("div", {
+        k("div", {
           class: "component-content",
-          style: w([a.value])
+          style: N([l.value])
         }, [
-          R("span", ve, [
-            q(u.$slots, "text", {}, () => [
-              G("Default Text")
+          k("span", be, [
+            T(c.$slots, "content", {}, () => [
+              A("Default Text")
             ], !0)
           ]),
-          R("span", {
+          k("span", {
             class: "component-content__mask",
-            style: w([o.value])
+            style: N([a.value])
           }, null, 4)
         ], 4)
-      ], 12, fe)
-    ], 6)) : A("", !0);
+      ], 12, ve)
+    ], 6)) : L("", !0);
   }
-}), pe = /* @__PURE__ */ j(be, [["__scopeId", "data-v-09b2bb91"]]);
-const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
+}), ye = /* @__PURE__ */ q(pe, [["__scopeId", "data-v-4cddc525"]]);
+const ge = ["id"], me = /* @__PURE__ */ Object.assign({
   name: "NbButtonShowHover",
   inheritAttrs: !1
 }, {
@@ -198,10 +198,6 @@ const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
       type: String,
       required: !0
     },
-    text: {
-      type: String,
-      default: "Default Text"
-    },
     textColor: {
       type: String,
       default: "#145deb"
@@ -259,80 +255,82 @@ const ye = ["id"], ge = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((a) => ({
-      e35bf122: r.value,
-      "122f086c": _.value,
-      "590fef9e": f.value,
-      "383cafc6": e.textColorHover,
-      66192716: ae(b)
+    const w = e;
+    M((d) => ({
+      "4b8ff329": o.value,
+      "456d13a6": h.value,
+      55665737: S.value,
+      "6b7abb00": e.textColorHover,
+      b18900c8: te(V)
     }));
     const {
-      text: C,
-      textColor: b,
-      buttonColorHover: x,
-      buttonColorOpacityHover: p,
-      paddingX: y,
-      paddingY: v,
-      disabled: V,
+      textColor: V,
+      buttonColorHover: b,
+      buttonColorOpacityHover: m,
+      paddingX: p,
+      paddingY: y,
+      disabled: _,
       borderRadius: g,
-      verticalAlign: N,
-      fontFamily: i,
-      fontSize: c,
-      fontWeight: m
-    } = M(B), l = t(() => {
-      const a = C.value ? C.value : "Default Text", o = V.value ? "component-disabled" : "", H = N.value ? N.value : "middle", d = b ? b.value : "ffffff", n = !y.value || y.value < 0 ? 1 : y.value, Y = !v.value || v.value < 0 ? 0.2 : v.value, z = !g.value || g.value < 0 ? 0 : g.value, W = x.value ? x.value : "10, 38, 184", u = !p.value || p.value < 0 ? 0.1 : p.value, I = i.value ? i.value : "'Lato', sans-serif", D = c.value ? c.value : "1.6rem", O = !m.value || m.value < 0 ? 100 : m.value;
+      verticalAlign: x,
+      fontFamily: C,
+      fontSize: f,
+      fontWeight: i
+    } = j(w), u = t(() => {
+      const d = _.value ? "component-disabled" : "", l = x.value ? x.value : "middle", a = V ? V.value : "ffffff", n = !p.value || p.value < 0 ? 1 : p.value, Y = !y.value || y.value < 0 ? 0.2 : y.value, r = !g.value || g.value < 0 ? 0 : g.value, X = b.value ? b.value : "10, 38, 184", z = !m.value || m.value < 0 ? 0.1 : m.value, W = C.value ? C.value : "'Lato', sans-serif", c = f.value ? f.value : "1.6rem", I = !i.value || i.value < 0 ? 100 : i.value;
       return {
-        disabled: o,
-        borderRadius: z,
-        textColor: d,
+        disabled: d,
+        borderRadius: r,
+        textColor: a,
         paddingX: n,
         paddingY: Y,
-        buttonColorHover: W,
-        buttonColorOpacityHover: u,
-        font: I,
-        fontSize: D,
-        fontWeight: O,
-        text: a,
-        verticalAlign: H
+        buttonColorHover: X,
+        buttonColorOpacityHover: z,
+        font: W,
+        fontSize: c,
+        fontWeight: I,
+        verticalAlign: l
       };
-    }), S = t(() => l.value.disabled), $ = t(() => ({
-      verticalAlign: l.value.verticalAlign
-    })), h = t(() => {
-      const a = l.value;
+    }), v = t(() => u.value.disabled), $ = t(() => ({
+      verticalAlign: u.value.verticalAlign
+    })), B = t(() => {
+      const d = u.value;
       return {
-        color: a.textColor,
-        padding: `${a.paddingY}rem 0`,
-        borderRadius: `${a.borderRadius}rem`,
-        fontSize: a.fontSize,
-        fontWeight: a.fontWeight
+        color: d.textColor,
+        padding: `${d.paddingY}rem 0`,
+        borderRadius: `${d.borderRadius}rem`,
+        fontSize: d.fontSize,
+        fontWeight: d.fontWeight
       };
-    }), _ = t(() => {
-      const a = l.value;
-      return `${a.paddingY}rem ${a.paddingX}rem`;
-    }), f = t(() => {
-      const a = l.value;
-      return `rgba(${a.buttonColorHover}, ${a.buttonColorOpacityHover})`;
-    }), r = t(() => l.value.font), k = () => {
+    }), h = t(() => {
+      const d = u.value;
+      return `${d.paddingY}rem ${d.paddingX}rem`;
+    }), S = t(() => {
+      const d = u.value;
+      return `rgba(${d.buttonColorHover}, ${d.buttonColorOpacityHover})`;
+    }), o = t(() => u.value.font), H = () => {
       s("clicked");
     };
-    return (a, o) => e.nbId ? (T(), L("div", {
+    return (d, l) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", S.value]),
-      style: w([$.value]),
-      onClick: k
+      class: R(["nb-wrapper", v.value]),
+      style: N([$.value]),
+      onClick: H
     }, [
-      R("a", {
+      k("a", {
         id: e.nbId,
         class: "nb-reset component tertiary",
-        style: w([h.value]),
-        onClick: o[0] || (o[0] = de(() => {
+        style: N([B.value]),
+        onClick: l[0] || (l[0] = re(() => {
         }, ["prevent"]))
-      }, te(l.value.text), 13, ye)
-    ], 6)) : A("", !0);
+      }, [
+        T(d.$slots, "content", {}, () => [
+          A("Default Text")
+        ], !0)
+      ], 12, ge)
+    ], 6)) : L("", !0);
   }
-}), me = /* @__PURE__ */ j(ge, [["__scopeId", "data-v-7f17ac3f"]]);
-const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
+}), Ve = /* @__PURE__ */ q(me, [["__scopeId", "data-v-35424129"]]);
+const Ce = ["id"], Se = /* @__PURE__ */ Object.assign({
   name: "NbButtonPrevNext",
   inheritAttrs: !1
 }, {
@@ -420,98 +418,98 @@ const Ve = ["id"], Ce = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((a) => ({
-      "2446b547": r.value,
+    const w = e;
+    M((l) => ({
+      "2446b547": H.value,
       a50bbbd2: e.colorPrimary,
       "0f9f603e": e.textColor,
       "748cd449": e.colorSecondary,
       "1af3ef9e": e.textColorHover
     }));
     const {
-      paddingX: C,
+      paddingX: V,
       paddingY: b,
-      marginBetween: x,
+      marginBetween: m,
       borderRadius: p,
       disabled: y,
-      disabledPreview: v,
-      disabledNext: V,
-      fontFamily: g,
-      fontSize: N,
-      fontWeight: i
-    } = M(B), c = t(() => {
-      const a = y.value ? "component-disabled" : "", o = v.value ? "component-disabled" : "", H = V.value ? "component-disabled" : "", d = !x.value || x.value < 0 ? 0 : x.value, n = !p.value || p.value < 0 ? 0 : p.value, Y = !C.value || C.value < 0 ? 1 : C.value, z = !b.value || b.value < 0 ? 10 : b.value, W = N.value ? N.value : "1.6em", u = !i.value || i.value < 0 ? 100 : i.value;
+      disabledPreview: _,
+      disabledNext: g,
+      fontFamily: x,
+      fontSize: C,
+      fontWeight: f
+    } = j(w), i = t(() => {
+      const l = y.value ? "component-disabled" : "", a = _.value ? "component-disabled" : "", n = g.value ? "component-disabled" : "", Y = !m.value || m.value < 0 ? 0 : m.value, r = !p.value || p.value < 0 ? 0 : p.value, X = !V.value || V.value < 0 ? 1 : V.value, z = !b.value || b.value < 0 ? 10 : b.value, W = C.value ? C.value : "1.6em", c = !f.value || f.value < 0 ? 100 : f.value;
       return {
-        disabled: a,
-        disabledPreview: o,
-        disabledNext: H,
-        marginBetween: `${d}px`,
-        borderRadius: `${n}px`,
-        paddingX: `${Y}px`,
+        disabled: l,
+        disabledPreview: a,
+        disabledNext: n,
+        marginBetween: `${Y}px`,
+        borderRadius: `${r}px`,
+        paddingX: `${X}px`,
         paddingY: `${z}px`,
         fontSize: W,
-        fontWeight: u
+        fontWeight: c
       };
-    }), m = t(() => c.value.disabled), l = t(() => c.value.disabledPreview), S = t(() => c.value.disabledNext), $ = t(() => ({
-      display: c.value.display
+    }), u = t(() => i.value.disabled), v = t(() => i.value.disabledPreview), $ = t(() => i.value.disabledNext), B = t(() => ({
+      display: i.value.display
     })), h = t(() => {
-      const a = c.value;
+      const l = i.value;
       return {
-        fontSize: a.fontSize,
-        fontWeight: a.fontWeight
+        fontSize: l.fontSize,
+        fontWeight: l.fontWeight
       };
-    }), _ = t(() => {
-      const a = c.value;
+    }), S = t(() => {
+      const l = i.value;
       return {
-        borderRadius: `${a.borderRadius} 0px 0px ${a.borderRadius}`,
-        marginRight: a.marginBetween,
-        padding: `${a.paddingX} ${a.paddingY}`
+        borderRadius: `${l.borderRadius} 0px 0px ${l.borderRadius}`,
+        marginRight: l.marginBetween,
+        padding: `${l.paddingX} ${l.paddingY}`
       };
-    }), f = t(() => {
-      const a = c.value;
+    }), o = t(() => {
+      const l = i.value;
       return {
-        borderRadius: `0px ${a.borderRadius} ${a.borderRadius} 0px`,
-        marginLeft: a.marginBetween,
-        padding: `${a.paddingX} ${a.paddingY}`
+        borderRadius: `0px ${l.borderRadius} ${l.borderRadius} 0px`,
+        marginLeft: l.marginBetween,
+        padding: `${l.paddingX} ${l.paddingY}`
       };
-    }), r = t(() => `'${g.value ? g.value : "'Lato', sans-serif"}'`), k = (a) => {
-      s("clicked", a);
+    }), H = t(() => `'${x.value ? x.value : "'Lato', sans-serif"}'`), d = (l) => {
+      s("clicked", l);
     };
-    return (a, o) => e.nbId ? (T(), L("div", {
+    return (l, a) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", m.value]),
-      style: w([$.value])
+      class: R(["nb-wrapper", u.value]),
+      style: N([B.value])
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component"]),
-        style: w(h.value)
+        class: R(["nb-reset", "component"]),
+        style: N(h.value)
       }, [
-        e.showPreview ? (T(), L("div", {
+        e.showPreview ? (D(), O("div", {
           key: 0,
-          onClick: o[0] || (o[0] = (H) => k("preview")),
-          class: X(["buttonNextPreview buttonPreview", l.value]),
-          style: w(_.value)
+          onClick: a[0] || (a[0] = (n) => d("preview")),
+          class: R(["buttonNextPreview buttonPreview", v.value]),
+          style: N(S.value)
         }, [
-          q(a.$slots, "prev", {}, () => [
-            G("← Preview")
+          T(l.$slots, "prev", {}, () => [
+            A("← Preview")
           ], !0)
-        ], 6)) : A("", !0),
-        e.showNext ? (T(), L("div", {
+        ], 6)) : L("", !0),
+        e.showNext ? (D(), O("div", {
           key: 1,
-          onClick: o[1] || (o[1] = (H) => k("next")),
-          class: X(["buttonNextPreview buttonNext", S.value]),
-          style: w(f.value)
+          onClick: a[1] || (a[1] = (n) => d("next")),
+          class: R(["buttonNextPreview buttonNext", $.value]),
+          style: N(o.value)
         }, [
-          q(a.$slots, "next", {}, () => [
-            G("Next →")
+          T(l.$slots, "next", {}, () => [
+            A("Next →")
           ], !0)
-        ], 6)) : A("", !0)
-      ], 12, Ve)
-    ], 6)) : A("", !0);
+        ], 6)) : L("", !0)
+      ], 12, Ce)
+    ], 6)) : L("", !0);
   }
-}), xe = /* @__PURE__ */ j(Ce, [["__scopeId", "data-v-f26b5a64"]]);
-const Se = ["id"], _e = /* @__PURE__ */ Object.assign({
+}), _e = /* @__PURE__ */ q(Se, [["__scopeId", "data-v-f26b5a64"]]);
+const xe = ["id"], he = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical",
   inheritAttrs: !1
 }, {
@@ -581,77 +579,77 @@ const Se = ["id"], _e = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((o) => ({
-      "196eb3ca": f.value,
-      "5a845ff6": ae(b),
-      "44f25ea8": k.value,
-      "3eb45b5e": r.value
+    const w = e;
+    M((a) => ({
+      "196eb3ca": o.value,
+      "5a845ff6": te(b),
+      "44f25ea8": d.value,
+      "3eb45b5e": H.value
     }));
     const {
-      display: C,
+      display: V,
       buttonColor: b,
-      textColor: x,
+      textColor: m,
       containerColor: p,
       paddingX: y,
-      paddingY: v,
-      borderRadius: V,
-      disabled: g,
-      animationSlow: N,
-      fontFamily: i,
-      fontSize: c,
-      fontWeight: m
-    } = M(B), l = t(() => {
-      const o = g.value ? "component-disabled" : "", H = C.value !== "b" ? "inline-block" : "block", d = p.value ? p.value : "#ffffff", n = b.value ? b.value : "#bbbbbb", Y = x.value ? x.value : "#ffffff", z = !y.value || y.value < 0 ? 1 : y.value, W = !v.value || v.value < 0 ? 0.2 : v.value, u = !V.value || V.value < 0 ? 0 : V.value, I = N.value ? "" : "component-transition__no-slow", D = i.value ? i.value : "'Lato', sans-serif", O = c.value ? c.value : "1.6em", P = !m.value || m.value < 0 ? 100 : m.value;
+      paddingY: _,
+      borderRadius: g,
+      disabled: x,
+      animationSlow: C,
+      fontFamily: f,
+      fontSize: i,
+      fontWeight: u
+    } = j(w), v = t(() => {
+      const a = x.value ? "component-disabled" : "", n = V.value !== "b" ? "inline-block" : "block", Y = p.value ? p.value : "#ffffff", r = b.value ? b.value : "#bbbbbb", X = m.value ? m.value : "#ffffff", z = !y.value || y.value < 0 ? 1 : y.value, W = !_.value || _.value < 0 ? 0.2 : _.value, c = !g.value || g.value < 0 ? 0 : g.value, I = C.value ? "" : "component-transition__no-slow", P = f.value ? f.value : "'Lato', sans-serif", F = i.value ? i.value : "1.6em", G = !u.value || u.value < 0 ? 100 : u.value;
       return {
-        disabled: o,
-        display: H,
-        containerColor: d,
-        buttonColor: n,
-        textColor: Y,
+        disabled: a,
+        display: n,
+        containerColor: Y,
+        buttonColor: r,
+        textColor: X,
         paddingX: z,
         paddingY: W,
-        borderRadius: u,
+        borderRadius: c,
         animationSlow: I,
-        font: D,
-        fontSize: O,
-        fontWeight: P
+        font: P,
+        fontSize: F,
+        fontWeight: G
       };
-    }), S = t(() => l.value.disabled), $ = t(() => ({
-      display: l.value.display
+    }), $ = t(() => v.value.disabled), B = t(() => ({
+      display: v.value.display
     })), h = t(() => {
-      const o = l.value;
+      const a = v.value;
       return {
-        border: `2px solid ${o.containerColor}`,
-        color: o.textColor,
-        backgroundColor: o.buttonColor,
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
-        borderRadius: `${o.borderRadius}rem`,
-        fontSize: o.fontSize,
-        fontWeight: o.fontWeight
+        border: `2px solid ${a.containerColor}`,
+        color: a.textColor,
+        backgroundColor: a.buttonColor,
+        padding: `${a.paddingY}rem ${a.paddingX}rem`,
+        borderRadius: `${a.borderRadius}rem`,
+        fontSize: a.fontSize,
+        fontWeight: a.fontWeight
       };
-    }), _ = t(() => l.value.animationSlow), f = t(() => l.value.font), r = t(() => l.value.textColor), k = t(() => l.value.buttonColor), a = () => {
+    }), S = t(() => v.value.animationSlow), o = t(() => v.value.font), H = t(() => v.value.textColor), d = t(() => v.value.buttonColor), l = () => {
       s("clicked");
     };
-    return (o, H) => e.nbId ? (T(), L("div", {
+    return (a, n) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", S.value]),
-      style: w([$.value]),
-      onClick: a
+      class: R(["nb-wrapper", $.value]),
+      style: N([B.value]),
+      onClick: l
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component", "component-transition", _.value]),
-        style: w([h.value])
+        class: R(["nb-reset", "component", "component-transition", S.value]),
+        style: N([h.value])
       }, [
-        q(o.$slots, "content", {}, () => [
-          G("Default Text")
+        T(a.$slots, "content", {}, () => [
+          A("Default Text")
         ], !0)
-      ], 14, Se)
-    ], 6)) : A("", !0);
+      ], 14, xe)
+    ], 6)) : L("", !0);
   }
-}), he = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-11d6e180"]]);
-const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
+}), Ne = /* @__PURE__ */ q(he, [["__scopeId", "data-v-11d6e180"]]);
+const we = ["id"], Be = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical2",
   inheritAttrs: !1
 }, {
@@ -717,74 +715,73 @@ const Ne = ["id"], we = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((r) => ({
-      a193a08a: _.value
+    const w = e;
+    M((o) => ({
+      "143d0975": h.value
     }));
     const {
-      text: C,
-      display: b,
-      buttonColor: x,
-      textColor: p,
-      paddingX: y,
-      paddingY: v,
-      borderRadius: V,
+      display: V,
+      buttonColor: b,
+      textColor: m,
+      paddingX: p,
+      paddingY: y,
+      borderRadius: _,
       shadowColor: g,
-      disabled: N,
-      fontFamily: i,
-      fontSize: c,
-      fontWeight: m
-    } = M(B), l = t(() => {
-      const r = N.value ? "component-disabled" : "", k = b.value !== "b" ? "inline-block" : "block", a = x.value ? x.value : "#bbbbbb", o = g.value ? g.value : "#002f3c", H = p.value ? p.value : "#ffffff", d = !y.value || y.value < 0 ? 1 : y.value, n = !v.value || v.value < 0 ? 1 : v.value, Y = !V.value || V.value < 0 ? 0 : V.value, z = i.value ? i.value : "'Lato', sans-serif", W = c.value ? c.value : "1.6em", u = !m.value || m.value < 0 ? 100 : m.value;
+      disabled: x,
+      fontFamily: C,
+      fontSize: f,
+      fontWeight: i
+    } = j(w), u = t(() => {
+      const o = x.value ? "component-disabled" : "", H = V.value !== "b" ? "inline-block" : "block", d = b.value ? b.value : "#bbbbbb", l = g.value ? g.value : "#002f3c", a = m.value ? m.value : "#ffffff", n = !p.value || p.value < 0 ? 1 : p.value, Y = !y.value || y.value < 0 ? 1 : y.value, r = !_.value || _.value < 0 ? 0 : _.value, X = C.value ? C.value : "'Lato', sans-serif", z = f.value ? f.value : "1.6em", W = !i.value || i.value < 0 ? 100 : i.value;
       return {
-        disabled: r,
-        display: k,
-        buttonColor: a,
-        shadowColor: o,
-        textColor: H,
-        paddingX: d,
-        paddingY: n,
-        borderRadius: Y,
-        font: z,
-        fontSize: W,
-        fontWeight: u
+        disabled: o,
+        display: H,
+        buttonColor: d,
+        shadowColor: l,
+        textColor: a,
+        paddingX: n,
+        paddingY: Y,
+        borderRadius: r,
+        font: X,
+        fontSize: z,
+        fontWeight: W
       };
-    }), S = t(() => l.value.disabled), $ = t(() => ({
-      display: l.value.display
-    })), h = t(() => {
-      const r = l.value;
+    }), v = t(() => u.value.disabled), $ = t(() => ({
+      display: u.value.display
+    })), B = t(() => {
+      const o = u.value;
       return {
-        color: r.textColor,
-        backgroundColor: r.buttonColor,
-        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${r.shadowColor}`,
-        padding: `${r.paddingY}rem ${r.paddingX}rem`,
-        padding: `${r.paddingY}rem ${r.paddingX}rem`,
-        borderRadius: `${r.borderRadius}rem`,
-        fontSize: r.fontSize,
-        fontWeight: r.fontWeight
+        color: o.textColor,
+        backgroundColor: o.buttonColor,
+        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${o.shadowColor}`,
+        padding: `${o.paddingY}rem ${o.paddingX}rem`,
+        padding: `${o.paddingY}rem ${o.paddingX}rem`,
+        borderRadius: `${o.borderRadius}rem`,
+        fontSize: o.fontSize,
+        fontWeight: o.fontWeight
       };
-    }), _ = t(() => l.value.font), f = () => {
+    }), h = t(() => u.value.font), S = () => {
       s("clicked");
     };
-    return (r, k) => e.nbId ? (T(), L("div", {
+    return (o, H) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", S.value]),
-      style: w([$.value]),
-      onClick: f
+      class: R(["nb-wrapper", v.value]),
+      style: N([$.value]),
+      onClick: S
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component", "component-transition"]),
-        style: w([h.value])
+        class: R(["nb-reset", "component", "component-transition"]),
+        style: N([B.value])
       }, [
-        q(r.$slots, "content", {}, () => [
-          G("Default Text")
+        T(o.$slots, "content", {}, () => [
+          A("Default Text")
         ], !0)
-      ], 12, Ne)
-    ], 6)) : A("", !0);
+      ], 12, we)
+    ], 6)) : L("", !0);
   }
-}), Be = /* @__PURE__ */ j(we, [["__scopeId", "data-v-fec2a51e"]]);
-const He = ["id"], $e = /* @__PURE__ */ Object.assign({
+}), $e = /* @__PURE__ */ q(Be, [["__scopeId", "data-v-f22590f0"]]);
+const He = ["id"], ke = /* @__PURE__ */ Object.assign({
   name: "NbButtonHamburger",
   inheritAttrs: !1
 }, {
@@ -833,75 +830,75 @@ const He = ["id"], $e = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((f) => ({
-      "4f0c7280": $.value,
+    const w = e;
+    M((o) => ({
+      "4f0c7280": B.value,
       "86dec5da": h.value
-    })), se(() => {
-      C.value = b.value;
+    })), de(() => {
+      V.value = b.value;
     });
-    const C = ie(!1), {
+    const V = se(!1), {
       status: b,
-      color: x,
+      color: m,
       containerColor: p,
       containerColorHover: y,
-      colorHover: v,
-      paddingX: V,
-      paddingY: g,
-      disabled: N
-    } = M(B), i = t(() => {
-      const f = N.value ? "component-disabled" : "", r = C.value ? "change" : "", k = p.value ? p.value : "#333333", a = x.value ? x.value : "#ffffff", o = !V.value || V.value < 0 ? 3 : V.value, H = !g.value || g.value < 0 ? 3 : g.value, d = y.value ? y.value : "yellow", n = v.value ? v.value : "red";
+      colorHover: _,
+      paddingX: g,
+      paddingY: x,
+      disabled: C
+    } = j(w), f = t(() => {
+      const o = C.value ? "component-disabled" : "", H = V.value ? "change" : "", d = p.value ? p.value : "#333333", l = m.value ? m.value : "#ffffff", a = !g.value || g.value < 0 ? 3 : g.value, n = !x.value || x.value < 0 ? 3 : x.value, Y = y.value ? y.value : "yellow", r = _.value ? _.value : "red";
       return {
-        disabled: f,
-        buttonStatus: r,
-        containerColor: k,
-        paddingX: o,
-        paddingY: H,
-        color: a,
-        containerColorHover: d,
-        colorHover: n
+        disabled: o,
+        buttonStatus: H,
+        containerColor: d,
+        paddingX: a,
+        paddingY: n,
+        color: l,
+        containerColorHover: Y,
+        colorHover: r
       };
-    }), c = t(() => i.value.disabled), m = t(() => {
-      const f = i.value;
+    }), i = t(() => f.value.disabled), u = t(() => {
+      const o = f.value;
       return {
-        padding: `${f.paddingY}px ${f.paddingX}px`,
-        backgroundColor: f.containerColor
+        padding: `${o.paddingY}px ${o.paddingX}px`,
+        backgroundColor: o.containerColor
       };
-    }), l = t(() => ({
-      backgroundColor: i.value.color
-    })), S = t(() => i.value.buttonStatus), $ = t(() => i.value.containerColorHover), h = t(() => i.value.colorHover), _ = () => {
-      const f = !C.value;
-      C.value = f, s("clicked", f);
+    }), v = t(() => ({
+      backgroundColor: f.value.color
+    })), $ = t(() => f.value.buttonStatus), B = t(() => f.value.containerColorHover), h = t(() => f.value.colorHover), S = () => {
+      const o = !V.value;
+      V.value = o, s("clicked", o);
     };
-    return ce(b, () => {
-      C.value = b.value;
-    }), (f, r) => e.nbId ? (T(), L("div", {
+    return ie(b, () => {
+      V.value = b.value;
+    }), (o, H) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", c.value]),
-      style: w([m.value]),
-      onClick: _
+      class: R(["nb-wrapper", i.value]),
+      style: N([u.value]),
+      onClick: S
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component", S.value])
+        class: R(["nb-reset", "component", $.value])
       }, [
-        R("div", {
+        k("div", {
           class: "component__line-one",
-          style: w(l.value)
+          style: N(v.value)
         }, null, 4),
-        R("div", {
+        k("div", {
           class: "component__line-two",
-          style: w(l.value)
+          style: N(v.value)
         }, null, 4),
-        R("div", {
+        k("div", {
           class: "component__line-three",
-          style: w(l.value)
+          style: N(v.value)
         }, null, 4)
       ], 10, He)
-    ], 6)) : A("", !0);
+    ], 6)) : L("", !0);
   }
-}), ke = /* @__PURE__ */ j($e, [["__scopeId", "data-v-37573ac0"]]);
-const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
+}), Ye = /* @__PURE__ */ q(ke, [["__scopeId", "data-v-37573ac0"]]);
+const Xe = (e) => (ce("data-v-ece1eb29"), e = e(), fe(), e), Re = ["id"], ze = /* @__PURE__ */ Xe(() => /* @__PURE__ */ k("div", { class: "component-shadow" }, null, -1)), We = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorOutside",
   inheritAttrs: !1
 }, {
@@ -919,10 +916,6 @@ const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
         return ["b", "ib"].includes(s);
       }
     },
-    text: {
-      type: String,
-      default: "Default Text"
-    },
     textColor: {
       type: String,
       default: "#ffffff"
@@ -971,72 +964,84 @@ const Ye = ["id"], Xe = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((o) => ({
-      bf6244be: f.value,
-      "3087ef32": k.value,
-      b71ed32e: _.value,
-      df6e4b52: r.value
+    const w = e;
+    M((a) => ({
+      "8560f71a": o.value,
+      "6b3aeb04": d.value,
+      "0087a452": S.value,
+      "4666baae": H.value
     }));
     const {
-      text: C,
-      display: b,
-      buttonColor: x,
-      borderColor: p,
-      textColor: y,
-      paddingX: v,
-      paddingY: V,
+      display: V,
+      buttonColor: b,
+      borderColor: m,
+      textColor: p,
+      paddingX: y,
+      paddingY: _,
       borderRadius: g,
-      disabled: N,
-      fontFamily: i,
-      fontSize: c,
-      fontWeight: m
-    } = M(B), l = t(() => {
-      const o = C.value ? C.value : "Default Text", H = N.value ? "component-disabled" : "", d = b.value !== "b" ? "inline-block" : "block", n = x.value ? x.value : "#bbbbbb", Y = p.value ? p.value : "#ffe54c", z = y.value ? y.value : "#ffffff", W = !v.value || v.value < 0 ? 1 : v.value, u = !V.value || V.value < 0 ? 0.2 : V.value, I = !g.value || g.value < 0 ? 0 : g.value, D = i.value ? i.value : "'Lato', sans-serif", O = c.value ? c.value : "1.6em", P = !m.value || m.value < 0 ? 200 : m.value;
+      disabled: x,
+      fontFamily: C,
+      fontSize: f,
+      fontWeight: i
+    } = j(w), u = t(() => {
+      const a = x.value ? "component-disabled" : "", n = V.value !== "b" ? "inline-block" : "block", Y = b.value ? b.value : "#bbbbbb", r = m.value ? m.value : "#ffe54c", X = p.value ? p.value : "#ffffff", z = !y.value || y.value < 0 ? 1 : y.value, W = !_.value || _.value < 0 ? 0.2 : _.value, c = !g.value || g.value < 0 ? 0 : g.value, I = C.value ? C.value : "'Lato', sans-serif", P = f.value ? f.value : "1.6em", F = !i.value || i.value < 0 ? 200 : i.value;
       return {
-        disabled: H,
-        display: d,
-        buttonColor: n,
-        borderColor: Y,
-        textColor: z,
-        paddingX: W,
-        paddingY: u,
-        text: o,
-        borderRadius: I,
-        font: D,
-        fontSize: O,
-        fontWeight: P
+        disabled: a,
+        display: n,
+        buttonColor: Y,
+        borderColor: r,
+        textColor: X,
+        paddingX: z,
+        paddingY: W,
+        borderRadius: c,
+        font: I,
+        fontSize: P,
+        fontWeight: F
       };
-    }), S = t(() => l.value.disabled), $ = t(() => ({
-      display: l.value.display
-    })), h = t(() => {
-      const o = l.value;
+    }), v = t(() => u.value.disabled), $ = t(() => ({
+      display: u.value.display
+    })), B = t(() => {
+      const a = u.value;
       return {
-        border: `1px solid ${o.borderColor}`,
-        color: o.textColor,
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
-        borderRadius: _.value,
-        fontSize: o.fontSize,
-        fontWeight: o.fontWeight
+        color: a.textColor,
+        fontSize: a.fontSize,
+        fontWeight: a.fontWeight
+      };
+    }), h = t(() => {
+      const a = u.value;
+      return {
+        padding: `${a.paddingY}rem ${a.paddingX}rem`,
+        border: `1px solid ${a.borderColor}`,
+        borderRadius: S.value
       };
-    }), _ = t(() => `${l.value.borderRadius}rem`), f = t(() => l.value.font), r = t(() => l.value.textColor), k = t(() => l.value.buttonColor), a = () => {
+    }), S = t(() => `${u.value.borderRadius}rem`), o = t(() => u.value.font), H = t(() => u.value.textColor), d = t(() => u.value.buttonColor), l = () => {
       s("clicked");
     };
-    return (o, H) => e.nbId ? (T(), L("div", {
+    return (a, n) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", S.value]),
-      style: w([$.value]),
-      onClick: a
+      class: R(["nb-wrapper", v.value]),
+      style: N([$.value]),
+      onClick: l
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component"]),
-        style: w([h.value])
-      }, te(l.value.text), 13, Ye)
-    ], 6)) : A("", !0);
+        class: R(["nb-reset", "component"]),
+        style: N([B.value])
+      }, [
+        k("div", {
+          class: "component-content",
+          style: N([h.value])
+        }, [
+          T(a.$slots, "content", {}, () => [
+            A("Default Text")
+          ], !0)
+        ], 4),
+        ze
+      ], 12, Re)
+    ], 6)) : L("", !0);
   }
-}), Re = /* @__PURE__ */ j(Xe, [["__scopeId", "data-v-34a3b3a9"]]);
-const ze = ["id"], We = /* @__PURE__ */ Object.assign({
+}), Ie = /* @__PURE__ */ q(We, [["__scopeId", "data-v-ece1eb29"]]);
+const De = ["id"], Oe = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorHover",
   inheritAttrs: !1
 }, {
@@ -1046,10 +1051,6 @@ const ze = ["id"], We = /* @__PURE__ */ Object.assign({
       type: String,
       required: !0
     },
-    text: {
-      type: String,
-      default: "Default Text"
-    },
     display: {
       type: String,
       default: "b",
@@ -1110,77 +1111,79 @@ const ze = ["id"], We = /* @__PURE__ */ Object.assign({
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((d) => ({
-      ea8f1624: f.value,
-      "68a00a02": a.value,
-      a1f5bb90: k.value,
-      "7c8ae57d": o.value,
-      "0ca91538": r.value
+    const w = e;
+    M((n) => ({
+      "70b0363a": S.value,
+      "2d562374": d.value,
+      "360329a3": H.value,
+      "3c24be28": l.value,
+      "7f8991ce": o.value
     }));
     const {
-      text: C,
-      display: b,
-      textColor: x,
-      paddingX: p,
-      paddingY: y,
-      borderRadius: v,
-      disabled: V,
+      display: V,
+      textColor: b,
+      paddingX: m,
+      paddingY: p,
+      borderRadius: y,
+      disabled: _,
       fontFamily: g,
-      fontSize: N,
-      fontWeight: i,
-      textColorHover: c,
-      buttonColor: m,
-      buttonColorHover: l
-    } = M(B), S = t(() => {
-      const d = C.value ? C.value : "Default Text", n = V.value ? "component-disabled" : "", Y = b.value !== "b" ? "inline-block" : "block", z = x ? x.value : "ffffff", W = !p.value || p.value < 0 ? 1 : p.value, u = !y.value || y.value < 0 ? 0.2 : y.value, I = !v.value || v.value < 0 ? 0 : v.value, D = g.value ? g.value : "'Lato', sans-serif", O = N.value ? N.value : "1.6rem", P = !i.value || i.value < 0 ? 100 : i.value, E = c.value ? c.value : "#cccccc", J = m.value ? m.value : "#bbbbbb", K = l.value ? l.value : "#959595";
+      fontSize: x,
+      fontWeight: C,
+      textColorHover: f,
+      buttonColor: i,
+      buttonColorHover: u
+    } = j(w), v = t(() => {
+      const n = _.value ? "component-disabled" : "", Y = V.value !== "b" ? "inline-block" : "block", r = b ? b.value : "ffffff", X = !m.value || m.value < 0 ? 1 : m.value, z = !p.value || p.value < 0 ? 0.2 : p.value, W = !y.value || y.value < 0 ? 0 : y.value, c = g.value ? g.value : "'Lato', sans-serif", I = x.value ? x.value : "1.6rem", P = !C.value || C.value < 0 ? 100 : C.value, F = f.value ? f.value : "#cccccc", G = i.value ? i.value : "#bbbbbb", E = u.value ? u.value : "#959595";
       return {
         disabled: n,
         display: Y,
-        font: D,
-        fontSize: O,
+        font: c,
+        fontSize: I,
         fontWeight: P,
-        text: d,
-        textColor: z,
-        paddingX: W,
-        paddingY: u,
-        borderRadius: I,
-        textColorHover: E,
-        buttonColor: J,
-        buttonColorHover: K
+        textColor: r,
+        paddingX: X,
+        paddingY: z,
+        borderRadius: W,
+        textColorHover: F,
+        buttonColor: G,
+        buttonColorHover: E
       };
-    }), $ = t(() => S.value.disabled), h = t(() => {
-      const d = S.value;
+    }), $ = t(() => v.value.disabled), B = t(() => {
+      const n = v.value;
       return {
-        display: d.display,
-        borderRadius: `${d.borderRadius}rem`
+        display: n.display,
+        borderRadius: `${n.borderRadius}rem`
       };
-    }), _ = t(() => {
-      const d = S.value;
+    }), h = t(() => {
+      const n = v.value;
       return {
-        color: d.textColor,
-        padding: `${d.paddingY}rem ${d.paddingX}rem`,
-        borderRadius: `${d.borderRadius}rem`,
-        fontSize: d.fontSize,
-        fontWeight: d.fontWeight
+        color: n.textColor,
+        padding: `${n.paddingY}rem ${n.paddingX}rem`,
+        borderRadius: `${n.borderRadius}rem`,
+        fontSize: n.fontSize,
+        fontWeight: n.fontWeight
       };
-    }), f = t(() => S.value.font), r = t(() => S.value.textColor), k = t(() => S.value.textColorHover), a = t(() => S.value.buttonColor), o = t(() => S.value.buttonColorHover), H = () => {
+    }), S = t(() => v.value.font), o = t(() => v.value.textColor), H = t(() => v.value.textColorHover), d = t(() => v.value.buttonColor), l = t(() => v.value.buttonColorHover), a = () => {
       s("clicked");
     };
-    return (d, n) => (T(), L("div", {
-      class: X(["nb-wrapper", $.value]),
-      style: w([h.value]),
-      onClick: H
+    return (n, Y) => (D(), O("div", {
+      class: R(["nb-wrapper", $.value]),
+      style: N([B.value]),
+      onClick: a
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
         class: "nb-reset component component-transition",
-        style: w([_.value])
-      }, te(S.value.text), 13, ze)
+        style: N([h.value])
+      }, [
+        T(n.$slots, "content", {}, () => [
+          A("Default Text")
+        ], !0)
+      ], 12, De)
     ], 6));
   }
-}), Ie = /* @__PURE__ */ j(We, [["__scopeId", "data-v-14a4a2ac"]]);
-const De = ["id"], Oe = { class: "first-child" }, Te = { class: "last-child" }, Le = /* @__PURE__ */ Object.assign({
+}), Le = /* @__PURE__ */ q(Oe, [["__scopeId", "data-v-849fae4e"]]);
+const Te = ["id"], Ae = { class: "first-child" }, Pe = { class: "last-child" }, Fe = /* @__PURE__ */ Object.assign({
   name: "NbButtonAlternateText",
   inheritAttrs: !1
 }, {
@@ -1264,41 +1267,41 @@ const De = ["id"], Oe = { class: "first-child" }, Te = { class: "last-child" },
   },
   emits: ["clicked"],
   setup(e, { emit: s }) {
-    const B = e;
-    F((n) => ({
-      "17a23bbc": k.value,
-      "2cc4da9c": a.value,
-      aa259cd0: o.value,
-      f0e00666: H.value
+    const w = e;
+    M((r) => ({
+      70620026: d.value,
+      "2928e4ba": l.value,
+      "0fe93572": a.value,
+      "4dcaff7e": n.value
     }));
     const {
-      display: C,
+      display: V,
       buttonColor: b,
-      borderColor: x,
+      borderColor: m,
       buttonHoverColor: p,
       showBorder: y,
-      borderRadius: v,
-      textColor: V,
-      textHoverColor: g,
-      width: N,
-      paddingX: i,
-      paddingY: c,
-      disabled: m,
-      fontFamily: l,
-      fontSize: S,
-      fontWeight: $
-    } = M(B), h = t(() => {
-      const n = m.value ? "component-disabled" : "", Y = C.value !== "b" ? "inline-block" : "block", z = b.value ? b.value : "#ffffff", W = p.value ? p.value : "#000000", u = x.value ? x.value : "#ffe54c", I = !v.value || v.value < 0 ? 0 : v.value, D = [!1, !0].includes(y.value) ? y.value : !0, O = V.value ? V.value : "#ffffff", P = g.value ? g.value : "#000000", E = !N.value || N.value < 86 ? 86 : N.value, J = !i.value || i.value < 0 ? 1 : i.value, K = !c.value || c.value < 0 ? 0.4 : c.value, Q = l.value ? l.value : "'Lato', sans-serif", U = S.value ? S.value : "1.6em", Z = !$.value || $.value < 0 ? 200 : $.value;
+      borderRadius: _,
+      textColor: g,
+      textHoverColor: x,
+      width: C,
+      paddingX: f,
+      paddingY: i,
+      disabled: u,
+      fontFamily: v,
+      fontSize: $,
+      fontWeight: B
+    } = j(w), h = t(() => {
+      const r = u.value ? "component-disabled" : "", X = V.value !== "b" ? "inline-block" : "block", z = b.value ? b.value : "#ffffff", W = p.value ? p.value : "#000000", c = m.value ? m.value : "#ffe54c", I = !_.value || _.value < 0 ? 0 : _.value, P = [!1, !0].includes(y.value) ? y.value : !0, F = g.value ? g.value : "#ffffff", G = x.value ? x.value : "#000000", E = !C.value || C.value < 86 ? 86 : C.value, J = !f.value || f.value < 0 ? 1 : f.value, K = !i.value || i.value < 0 ? 0.4 : i.value, Q = v.value ? v.value : "'Lato', sans-serif", U = $.value ? $.value : "1.6em", Z = !B.value || B.value < 0 ? 200 : B.value;
       return {
-        disabled: n,
-        display: Y,
+        disabled: r,
+        display: X,
         buttonColor: z,
         buttonHoverColor: W,
-        borderColor: u,
-        showBorder: D,
+        borderColor: c,
+        showBorder: P,
         borderRadius: I,
-        textColor: O,
-        textHoverColor: P,
+        textColor: F,
+        textHoverColor: G,
         width: E,
         paddingX: J,
         paddingY: K,
@@ -1306,67 +1309,67 @@ const De = ["id"], Oe = { class: "first-child" }, Te = { class: "last-child" },
         fontSize: U,
         fontWeight: Z
       };
-    }), _ = t(() => h.value.disabled), f = t(() => ({
+    }), S = t(() => h.value.disabled), o = t(() => ({
       display: h.value.display
-    })), r = t(() => {
-      const n = h.value, Y = n.display === "block" ? "auto" : `${n.width}px`;
+    })), H = t(() => {
+      const r = h.value, X = r.display === "block" ? "auto" : `${r.width}px`;
       return {
-        ...n.showBorder ? { border: `1px solid ${n.borderColor}` } : {},
-        borderRadius: `${n.borderRadius}rem`,
-        background: n.buttonColor,
+        ...r.showBorder ? { border: `1px solid ${r.borderColor}` } : {},
+        borderRadius: `${r.borderRadius}rem`,
+        background: r.buttonColor,
         minWidth: "33px",
-        width: Y,
-        padding: `${n.paddingY}rem ${n.paddingX}rem`,
+        width: X,
+        padding: `${r.paddingY}rem ${r.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: n.fontSize,
-        fontWeight: n.fontWeight
+        fontSize: r.fontSize,
+        fontWeight: r.fontWeight
       };
-    }), k = t(() => h.value.font), a = t(() => h.value.textColor), o = t(() => h.value.textHoverColor), H = t(() => h.value.buttonHoverColor), d = () => {
+    }), d = t(() => h.value.font), l = t(() => h.value.textColor), a = t(() => h.value.textHoverColor), n = t(() => h.value.buttonHoverColor), Y = () => {
       s("clicked");
     };
-    return (n, Y) => e.nbId ? (T(), L("div", {
+    return (r, X) => e.nbId ? (D(), O("div", {
       key: 0,
-      class: X(["nb-wrapper", _.value]),
-      style: w([f.value]),
-      onClick: d
+      class: R(["nb-wrapper", S.value]),
+      style: N([o.value]),
+      onClick: Y
     }, [
-      R("div", {
+      k("div", {
         id: e.nbId,
-        class: X(["nb-reset", "component"]),
-        style: w([r.value])
+        class: R(["nb-reset", "component"]),
+        style: N([H.value])
       }, [
-        R("div", Oe, [
-          q(n.$slots, "content", {}, () => [
-            G("Default Text")
+        k("div", Ae, [
+          T(r.$slots, "content", {}, () => [
+            A("Default Text")
           ], !0)
         ]),
-        R("div", Te, [
-          q(n.$slots, "content-alternate", {}, () => [
-            G("Default Alternate Text")
+        k("div", Pe, [
+          T(r.$slots, "content", {}, () => [
+            A("Default Text")
           ], !0)
         ])
-      ], 12, De)
-    ], 6)) : A("", !0);
+      ], 12, Te)
+    ], 6)) : L("", !0);
   }
-}), Ae = /* @__PURE__ */ j(Le, [["__scopeId", "data-v-e0ed856f"]]), ee = {
-  NbButtonVavaGame: pe,
-  NbButtonShowHover: me,
-  NbButtonPrevNext: xe,
-  NbButtonMechanical: he,
-  NbButtonMechanical2: Be,
-  NbButtonHamburger: ke,
-  NbButtonColorOutside: Re,
-  NbButtonColorHover: Ie,
-  NbButtonAlternateText: Ae
-}, Fe = {
+}), Me = /* @__PURE__ */ q(Fe, [["__scopeId", "data-v-fe71a891"]]), ee = {
+  NbButtonVavaGame: ye,
+  NbButtonShowHover: Ve,
+  NbButtonPrevNext: _e,
+  NbButtonMechanical: Ne,
+  NbButtonMechanical2: $e,
+  NbButtonHamburger: Ye,
+  NbButtonColorOutside: Ie,
+  NbButtonColorHover: Le,
+  NbButtonAlternateText: Me
+}, qe = {
   install(e) {
     for (const s in ee)
       if (Object.prototype.hasOwnProperty.call(ee, s)) {
-        const B = ee[s];
-        e.component(B.name, B);
+        const w = ee[s];
+        e.component(w.name, w);
       }
   }
 };
 export {
-  Fe as default
+  qe as default
 };