@vlalg-nimbus/nb-buttons 5.0.0 → 5.0.2

package/dist/nb-buttons.js

@@ -1,10 +1,10 @@
-import { useCssVars as fe, toRefs as ce, computed as t, openBlock as J, createElementBlock as Q, mergeProps as ie, withKeys as Y, withModifiers as z, unref as B, createElementVNode as P, normalizeClass as ue, normalizeStyle as M, renderSlot as oe, createTextVNode as re, createCommentVNode as te, onMounted as He, ref as me, watch as gt, toDisplayString as Se, nextTick as Ce, onUnmounted as xt, Fragment as Vt, renderList as Ct } from "vue";
-const ve = (e, b) => {
+import { useCssVars as xe, toRefs as Be, computed as t, openBlock as fe, createElementBlock as ve, mergeProps as Se, withKeys as O, withModifiers as A, unref as o, createElementVNode as de, normalizeClass as pe, normalizeStyle as se, renderSlot as he, createTextVNode as Ce, createCommentVNode as ye, onMounted as Ee, ref as Te, watch as yt, toDisplayString as We, nextTick as Oe, onUnmounted as mt, Fragment as ht, renderList as Ct } from "vue";
+const ke = (e, l) => {
   const X = e.__vccOpts || e;
-  for (const [D, j] of b)
-    X[D] = j;
+  for (const [ae, q] of l)
+    X[ae] = q;
   return X;
-}, St = ["tabIndex"], ht = ["id"], Bt = { class: "component-content__text" }, wt = /* @__PURE__ */ Object.assign({
+}, St = ["tabIndex"], xt = ["id"], Bt = { class: "component-content__text" }, kt = /* @__PURE__ */ Object.assign({
   name: "NbButtonVavaGame",
   inheritAttrs: !1
 }, {
@@ -18,8 +18,8 @@ const ve = (e, b) => {
       type: String,
       default: "ib",
       validator: (e = "") => {
-        const b = e.toLowerCase();
-        return ["b", "ib"].includes(b);
+        const l = e.toLowerCase();
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -42,25 +42,63 @@ const ve = (e, b) => {
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "#ece8e1"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    buttonColor: {
+    // Cores do tema light
+    lightTextColor: {
       type: String,
-      default: "blue"
+      default: "#333333"
     },
-    textColorHover: {
+    lightTextColorHover: {
       type: String,
-      default: "gray"
+      default: "#000000"
     },
-    buttonColorHover: {
+    lightButtonColor: {
       type: String,
-      default: "cyan"
+      default: "#f5f5f5"
     },
-    borderColor: {
+    lightButtonColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightBorderColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
       type: String,
-      default: "yellow"
+      default: "#ffffff"
+    },
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkBorderColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     borderOpacity: {
       type: Number,
@@ -112,122 +150,131 @@ const ve = (e, b) => {
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((n) => ({
-      "046f6978": i.value,
-      "583bd83a": o.value,
-      dae1d5bc: d.value,
-      "5d33bf9b": r.value,
-      "5b215a43": a.value
+  setup(e, { emit: l }) {
+    xe(($) => ({
+      "1dd0577e": B.value,
+      b105ba7c: h.value,
+      "5ac1c0cc": r.value,
+      "3d66efba": n.value,
+      "71da78fd": E.value,
+      "4bcbc8dd": i.value,
+      "219b125f": u.value,
+      "1f7aebc4": H.value,
+      c5c01c84: oe.value,
+      "0e55887f": M.value,
+      "78d4c939": ie.value,
+      "4f2feb83": be.value,
+      "1ddc4b8e": c.value,
+      b914842c: v.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      textColor: H,
-      textColorHover: A,
-      buttonColor: O,
-      buttonColorHover: N,
-      uppercase: x,
-      paddingXContent: V,
-      paddingYContent: w,
-      paddingXBorder: I,
-      paddingYBorder: S,
-      borderColor: T,
-      borderOpacity: f,
-      disabled: y,
-      fontFamily: L,
-      fontSize: W,
-      fontWeight: m
-    } = ce(D), h = t(() => {
-      const n = y.value ? "component-disabled" : "", c = j.value !== "b" ? "inline-block" : "block", k = H.value ? H.value : "#ece8e1", F = O.value ? O.value : "green", G = A.value ? A.value : "#ece8e1", le = N.value ? N.value : "cyan", ae = T.value ? T.value : "#ffffff", K = !f.value || !(f.value >= 0 && f.value <= 1) ? "0.5" : f.value, ne = !I.value || I.value < 0 ? 0.3 : I.value, de = !S.value || S.value < 0 ? 0.3 : S.value, U = !V.value || V.value < 0 ? 0.5 : V.value, be = !w.value || w.value < 0 ? 0.5 : w.value, Z = x.value ? "uppercase" : "none", pe = L.value ? L.value : "'Lato', sans-serif", se = W.value ? W.value : "1.6em", ge = !m.value || m.value < 0 ? 100 : m.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightTextColorHover: te,
+      lightButtonColor: j,
+      lightButtonColorHover: Z,
+      lightBorderColor: F,
+      lightDisabledBgColor: G,
+      darkTextColor: ee,
+      darkTextColorHover: W,
+      darkButtonColor: L,
+      darkButtonColorHover: V,
+      darkBorderColor: I,
+      darkDisabledBgColor: b,
+      uppercase: T,
+      paddingXContent: f,
+      paddingYContent: m,
+      paddingXBorder: d,
+      paddingYBorder: _,
+      borderOpacity: S,
+      disabled: D,
+      fontFamily: P,
+      fontSize: J,
+      fontWeight: w
+    } = Be(ae), x = t(() => {
+      const $ = D.value ? "component-disabled" : "", k = q.value !== "b" ? "inline-block" : "block", ue = !S.value || !(S.value >= 0 && S.value <= 1) ? "0.5" : S.value, ne = !d.value || d.value < 0 ? 0.3 : d.value, me = !_.value || _.value < 0 ? 0.3 : _.value, ge = !f.value || f.value < 0 ? 0.5 : f.value, Ie = !m.value || m.value < 0 ? 0.5 : m.value, _e = T.value ? "uppercase" : "none", De = P.value ? P.value : "'Lato', sans-serif", Ne = J.value ? J.value : "1.6em", Re = !w.value || w.value < 0 ? 100 : w.value;
       return {
-        disabled: n,
-        display: c,
-        textColor: k,
-        buttonColor: F,
-        textColorHover: G,
-        buttonColorHover: le,
-        borderColor: ae,
-        borderOpacity: K,
+        disabled: $,
+        display: k,
+        borderOpacity: ue,
         paddingXBorder: ne,
-        paddingYBorder: de,
-        paddingXContent: U,
-        paddingYContent: be,
-        uppercase: Z,
-        font: pe,
-        fontSize: se,
-        fontWeight: ge
+        paddingYBorder: me,
+        paddingXContent: ge,
+        paddingYContent: Ie,
+        uppercase: _e,
+        font: De,
+        fontSize: Ne,
+        fontWeight: Re
       };
-    }), R = t(() => h.value.disabled), s = t(() => ({
-      display: h.value.display
-    })), $ = t(() => {
-      const n = h.value;
+    }), R = t(() => x.value.disabled), K = t(() => ({
+      display: x.value.display
+    })), p = t(() => {
+      const $ = x.value;
       return {
-        padding: `${n.paddingYBorder}rem ${n.paddingXBorder}rem`,
-        fontSize: n.fontSize,
-        fontWeight: n.fontWeight
+        padding: `${$.paddingYBorder}rem ${$.paddingXBorder}rem`,
+        fontSize: $.fontSize,
+        fontWeight: $.fontWeight
       };
-    }), g = t(() => {
-      const n = h.value;
+    }), s = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), N = t(() => {
+      const $ = x.value;
       return {
-        textTransform: n.uppercase,
-        padding: `${n.paddingYContent}rem ${n.paddingXContent}rem`,
-        backgroundColor: n.buttonColor
+        textTransform: $.uppercase,
+        padding: `${$.paddingYContent}rem ${$.paddingXContent}rem`
       };
-    }), p = t(() => ({
-      backgroundColor: h.value.buttonColorHover
-    })), i = t(() => h.value.font), r = t(() => h.value.borderColor), a = t(() => h.value.borderOpacity), o = t(() => h.value.textColor), d = t(() => h.value.textColorHover), v = t(() => {
-      const n = {};
-      C.value && Object.keys(C.value).forEach((F) => n[`aria-${F}`] = C.value[F]);
-      const c = {
-        "aria-label": E.value,
-        "aria-disabled": y.value,
-        ...n
+    }), z = t(() => ({})), B = t(() => x.value.font), E = t(() => x.value.borderOpacity), h = t(() => U.value), r = t(() => te.value), i = t(() => j.value), u = t(() => Z.value), n = t(() => F.value), c = t(() => G.value), H = t(() => ee.value), oe = t(() => W.value), ie = t(() => L.value), be = t(() => V.value), M = t(() => I.value), v = t(() => b.value), g = t(() => {
+      const $ = {};
+      y.value && Object.keys(y.value).forEach((ne) => $[`aria-${ne}`] = y.value[ne]);
+      const k = {
+        "aria-label": Q.value,
+        "aria-disabled": D.value,
+        ...$
       };
       return Object.fromEntries(
-        Object.entries(c).filter(([k, F]) => F != null)
+        Object.entries(k).filter(([ue, ne]) => ne != null)
       );
-    }), u = () => {
+    }), le = () => {
       X("clicked");
     };
-    return (n, c) => e.nbId ? (J(), Q("div", ie({
+    return ($, k) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
       class: ["nb-wrapper", R.value],
-      style: [s.value],
+      style: [K.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, v.value, {
-      onClick: u,
+    }, g.value, {
+      onClick: le,
       onKeydown: [
-        c[0] || (c[0] = Y(z((k) => !B(y) && e.hasTabIndexEnter && u(), ["prevent"]), ["enter"])),
-        c[1] || (c[1] = Y(z((k) => !B(y) && e.hasTabIndexSpace && u(), ["prevent"]), ["space"]))
+        k[0] || (k[0] = O(A((ue) => !o(D) && e.hasTabIndexEnter && le(), ["prevent"]), ["enter"])),
+        k[1] || (k[1] = O(A((ue) => !o(D) && e.hasTabIndexSpace && le(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component"]),
-        style: M([$.value])
+        class: pe(["nb-reset", "component", s.value]),
+        style: se([p.value])
       }, [
-        P("div", {
+        de("div", {
           class: "component-content",
-          style: M([g.value])
+          style: se([N.value])
         }, [
-          P("span", Bt, [
-            oe(n.$slots, "content", {}, () => [
-              c[2] || (c[2] = re("Default Text"))
+          de("span", Bt, [
+            he($.$slots, "content", {}, () => [
+              k[2] || (k[2] = Ce("Default Text"))
             ], !0)
           ]),
-          P("span", {
+          de("span", {
             class: "component-content__mask",
-            style: M([p.value])
+            style: se([z.value])
           }, null, 4)
         ], 4)
-      ], 12, ht)
-    ], 16, St)) : te("", !0);
+      ], 14, xt)
+    ], 16, St)) : ye("", !0);
   }
-}), It = /* @__PURE__ */ ve(wt, [["__scopeId", "data-v-622d0a33"]]);
-const $t = ["tabIndex"], Nt = ["id"], Ht = /* @__PURE__ */ Object.assign({
+}), Vt = /* @__PURE__ */ ke(kt, [["__scopeId", "data-v-eb3b20b1"]]);
+const Tt = ["tabIndex"], wt = ["id"], $t = /* @__PURE__ */ Object.assign({
   name: "NbButtonShowHover",
   inheritAttrs: !1
 }, {
@@ -257,22 +304,56 @@ const $t = ["tabIndex"], Nt = ["id"], Ht = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
+      type: String,
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
+    },
+    // Cores do tema light
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
       type: String,
-      default: "#145deb"
+      default: "#000000"
+    },
+    lightButtonColorHover: {
+      type: String,
+      default: "245, 245, 245"
+    },
+    lightButtonColorOpacityHover: {
+      type: Number,
+      default: 0.1
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
     },
-    textColorHover: {
+    // Cores do tema dark
+    darkTextColor: {
       type: String,
-      default: "#4bd6b5"
+      default: "#e0e0e0"
     },
-    buttonColorHover: {
+    darkTextColorHover: {
       type: String,
-      default: "10, 38, 184"
+      default: "#ffffff"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "45, 45, 45"
     },
-    buttonColorOpacityHover: {
+    darkButtonColorOpacityHover: {
       type: Number,
       default: 0.1
     },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
+    },
     paddingX: {
       type: Number,
       default: 1,
@@ -313,102 +394,110 @@ const $t = ["tabIndex"], Nt = ["id"], Ht = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((g) => ({
-      "57de9d29": R.value,
-      b22184b4: m.value,
-      "05b72592": h.value,
-      66063600: e.textColorHover,
-      "3387159c": B(C)
+  setup(e, { emit: l }) {
+    xe((r) => ({
+      "254fad7c": B.value,
+      "7a31df04": R.value,
+      "153f3e7f": x.value,
+      "640d0dba": p.value,
+      "1e30675e": K.value,
+      "7545f4e2": s.value,
+      "75c79c3f": z.value,
+      "1bb6bd0c": N.value
     }));
-    const X = b, D = e, {
-      ariaLabel: j,
-      ariaAttrs: E,
-      textColor: C,
-      buttonColorHover: H,
-      buttonColorOpacityHover: A,
-      paddingX: O,
-      paddingY: N,
-      disabled: x,
-      borderRadius: V,
-      verticalAlign: w,
-      fontFamily: I,
-      fontSize: S,
-      fontWeight: T
-    } = ce(D), f = t(() => {
-      const g = x.value ? "component-disabled" : "", p = w.value ? w.value : "middle", i = C ? C.value : "ffffff", r = !O.value || O.value < 0 ? 1 : O.value, a = !N.value || N.value < 0 ? 0.2 : N.value, o = !V.value || V.value < 0 ? 0 : V.value, d = H.value ? H.value : "10, 38, 184", v = !A.value || A.value < 0 ? 0.1 : A.value, u = I.value ? I.value : "'Lato', sans-serif", n = S.value ? S.value : "1.6rem", c = !T.value || T.value < 0 ? 100 : T.value;
+    const X = l, ae = e, {
+      ariaLabel: q,
+      ariaAttrs: Q,
+      theme: y,
+      lightTextColor: Y,
+      lightTextColorHover: U,
+      lightButtonColorHover: te,
+      lightButtonColorOpacityHover: j,
+      lightDisabledBgColor: Z,
+      darkTextColor: F,
+      darkTextColorHover: G,
+      darkButtonColorHover: ee,
+      darkButtonColorOpacityHover: W,
+      darkDisabledBgColor: L,
+      paddingX: V,
+      paddingY: I,
+      disabled: b,
+      borderRadius: T,
+      verticalAlign: f,
+      fontFamily: m,
+      fontSize: d,
+      fontWeight: _
+    } = Be(ae), S = t(() => {
+      const r = b.value ? "component-disabled" : "", i = f.value ? f.value : "middle", u = !V.value || V.value < 0 ? 1 : V.value, n = !I.value || I.value < 0 ? 0.2 : I.value, c = !T.value || T.value < 0 ? 0 : T.value, H = m.value ? m.value : "'Lato', sans-serif", oe = d.value ? d.value : "1.6rem", ie = !_.value || _.value < 0 ? 100 : _.value;
       return {
-        disabled: g,
-        borderRadius: o,
-        textColor: i,
-        paddingX: r,
-        paddingY: a,
-        buttonColorHover: d,
-        buttonColorOpacityHover: v,
-        font: u,
-        fontSize: n,
-        fontWeight: c,
-        verticalAlign: p
+        disabled: r,
+        borderRadius: c,
+        paddingX: u,
+        paddingY: n,
+        font: H,
+        fontSize: oe,
+        fontWeight: ie,
+        verticalAlign: i
       };
-    }), y = t(() => f.value.disabled), L = t(() => ({
-      verticalAlign: f.value.verticalAlign
-    })), W = t(() => {
-      const g = f.value;
+    }), D = t(() => S.value.disabled), P = t(() => ({
+      verticalAlign: S.value.verticalAlign
+    })), J = t(() => y.value === "dark" ? "component__theme--dark" : "component__theme--light"), w = t(() => {
+      const r = S.value;
       return {
-        color: g.textColor,
-        padding: `${g.paddingY}rem 0`,
-        borderRadius: `${g.borderRadius}rem`,
-        fontSize: g.fontSize,
-        fontWeight: g.fontWeight
+        padding: `${r.paddingY}rem 0`,
+        borderRadius: `${r.borderRadius}rem`,
+        fontSize: r.fontSize,
+        fontWeight: r.fontWeight
       };
-    }), m = t(() => {
-      const g = f.value;
-      return `${g.paddingY}rem ${g.paddingX}rem`;
-    }), h = t(() => {
-      const g = f.value;
-      return `rgba(${g.buttonColorHover}, ${g.buttonColorOpacityHover})`;
-    }), R = t(() => f.value.font), s = t(() => {
-      const g = {};
-      E.value && Object.keys(E.value).forEach((r) => g[`aria-${r}`] = E.value[r]);
-      const p = {
-        "aria-label": j.value,
-        "aria-disabled": x.value,
-        ...g
+    }), x = t(() => {
+      const r = S.value;
+      return `${r.paddingY}rem ${r.paddingX}rem`;
+    }), R = t(() => Y.value), K = t(() => U.value), p = t(() => `rgba(${te.value}, ${j.value})`);
+    t(() => Z.value);
+    const s = t(() => F.value), N = t(() => G.value), z = t(() => `rgba(${ee.value}, ${W.value})`);
+    t(() => L.value);
+    const B = t(() => S.value.font), E = t(() => {
+      const r = {};
+      Q.value && Object.keys(Q.value).forEach((n) => r[`aria-${n}`] = Q.value[n]);
+      const i = {
+        "aria-label": q.value,
+        "aria-disabled": b.value,
+        ...r
       };
       return Object.fromEntries(
-        Object.entries(p).filter(([i, r]) => r != null)
+        Object.entries(i).filter(([u, n]) => n != null)
       );
-    }), $ = () => {
+    }), h = () => {
       X("clicked");
     };
-    return (g, p) => e.nbId ? (J(), Q("div", ie({
+    return (r, i) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", y.value],
-      style: [L.value],
+      class: ["nb-wrapper", D.value],
+      style: [P.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, s.value, {
-      onClick: $,
+    }, E.value, {
+      onClick: h,
       onKeydown: [
-        p[1] || (p[1] = Y(z((i) => !B(x) && e.hasTabIndexEnter && $(), ["prevent"]), ["enter"])),
-        p[2] || (p[2] = Y(z((i) => !B(x) && e.hasTabIndexSpace && $(), ["prevent"]), ["space"]))
+        i[1] || (i[1] = O(A((u) => !o(b) && e.hasTabIndexEnter && h(), ["prevent"]), ["enter"])),
+        i[2] || (i[2] = O(A((u) => !o(b) && e.hasTabIndexSpace && h(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("a", {
+      de("a", {
         id: e.nbId,
-        class: "nb-reset component tertiary",
-        style: M([W.value]),
-        onClick: p[0] || (p[0] = z(() => {
+        class: pe(["nb-reset component tertiary", [J.value]]),
+        style: se([w.value]),
+        onClick: i[0] || (i[0] = A(() => {
         }, ["prevent"]))
       }, [
-        oe(g.$slots, "content", {}, () => [
-          p[3] || (p[3] = re("Default Text"))
+        he(r.$slots, "content", {}, () => [
+          i[3] || (i[3] = Ce("Default Text"))
         ], !0)
-      ], 12, Nt)
-    ], 16, $t)) : te("", !0);
+      ], 14, wt)
+    ], 16, Tt)) : ye("", !0);
   }
-}), At = /* @__PURE__ */ ve(Ht, [["__scopeId", "data-v-df41f6d9"]]);
-const Tt = ["id"], kt = ["tabIndex"], Ot = ["tabIndex"], Wt = /* @__PURE__ */ Object.assign({
+}), It = /* @__PURE__ */ ke($t, [["__scopeId", "data-v-2816d105"]]);
+const _t = ["id"], Dt = ["tabIndex"], Nt = ["tabIndex"], Ht = /* @__PURE__ */ Object.assign({
   name: "NbButtonPrevNext",
   inheritAttrs: !1
 }, {
@@ -450,21 +539,55 @@ const Tt = ["id"], kt = ["tabIndex"], Ot = ["tabIndex"], Wt = /* @__PURE__ */ Ob
       type: Object,
       default: () => ({})
     },
-    colorPrimary: {
+    theme: {
       type: String,
-      default: "tomato"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    colorSecondary: {
+    // Cores do tema light
+    lightColorPrimary: {
       type: String,
-      default: "blue"
+      default: "#f5f5f5"
     },
-    textColor: {
+    lightColorSecondary: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
+      type: String,
+      default: "#000000"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkColorPrimary: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkColorSecondary: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
       type: String,
-      default: "#fff"
+      default: "#ffffff"
     },
-    textColorHover: {
+    darkDisabledBgColor: {
       type: String,
-      default: "yellow"
+      default: "rgba(40, 42, 54, 1)"
     },
     paddingX: {
       type: Number,
@@ -527,138 +650,157 @@ const Tt = ["id"], kt = ["tabIndex"], Ot = ["tabIndex"], Wt = /* @__PURE__ */ Ob
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((a) => ({
-      "10e83d30": g.value,
-      "71edb100": e.colorPrimary,
-      "69193c16": e.textColor,
-      "2b4f661c": e.colorSecondary,
-      de812f72: e.textColorHover
+  setup(e, { emit: l }) {
+    xe((v) => ({
+      cf4bc708: oe.value,
+      "5116e291": E.value,
+      "266d0204": r.value,
+      b809437a: h.value,
+      "4a627998": i.value,
+      "7b7542f9": u.value,
+      "27ce8ac8": c.value,
+      "9f7976aa": n.value,
+      "56aa6000": H.value
     }));
-    const X = b, D = e, {
-      ariaLabelPrev: j,
-      ariaAttrsPrev: E,
-      ariaLabelNext: C,
-      ariaAttrsNext: H,
-      paddingX: A,
-      paddingY: O,
-      marginBetween: N,
-      borderRadius: x,
-      disabled: V,
-      disabledPreview: w,
-      disabledNext: I,
-      fontFamily: S,
-      fontSize: T,
-      fontWeight: f
-    } = ce(D), y = t(() => {
-      const a = V.value ? "component-disabled" : "", o = w.value ? "component-disabled" : "", d = I.value ? "component-disabled" : "", v = !N.value || N.value < 0 ? 0 : N.value, u = !x.value || x.value < 0 ? 0 : x.value, n = !A.value || A.value < 0 ? 1 : A.value, c = !O.value || O.value < 0 ? 10 : O.value, k = T.value ? T.value : "1.6em", F = !f.value || f.value < 0 ? 100 : f.value;
+    const X = l, ae = e, {
+      ariaLabelPrev: q,
+      ariaAttrsPrev: Q,
+      ariaLabelNext: y,
+      ariaAttrsNext: Y,
+      theme: U,
+      lightColorPrimary: te,
+      lightColorSecondary: j,
+      lightTextColor: Z,
+      lightTextColorHover: F,
+      lightDisabledBgColor: G,
+      darkColorPrimary: ee,
+      darkColorSecondary: W,
+      darkTextColor: L,
+      darkTextColorHover: V,
+      darkDisabledBgColor: I,
+      paddingX: b,
+      paddingY: T,
+      marginBetween: f,
+      borderRadius: m,
+      disabled: d,
+      disabledPreview: _,
+      disabledNext: S,
+      fontFamily: D,
+      fontSize: P,
+      fontWeight: J
+    } = Be(ae), w = t(() => {
+      const v = d.value ? "component-disabled" : "", g = _.value ? "component-disabled" : "", le = S.value ? "component-disabled" : "", $ = !f.value || f.value < 0 ? 0 : f.value, k = !m.value || m.value < 0 ? 0 : m.value, ue = !b.value || b.value < 0 ? 1 : b.value, ne = !T.value || T.value < 0 ? 10 : T.value, me = P.value ? P.value : "1.6em", ge = !J.value || J.value < 0 ? 100 : J.value;
       return {
-        disabled: a,
-        disabledPreview: o,
-        disabledNext: d,
-        marginBetween: `${v}px`,
-        borderRadius: `${u}px`,
-        paddingX: `${n}px`,
-        paddingY: `${c}px`,
-        fontSize: k,
-        fontWeight: F
+        disabled: v,
+        disabledPreview: g,
+        disabledNext: le,
+        marginBetween: `${$}px`,
+        borderRadius: `${k}px`,
+        paddingX: `${ue}px`,
+        paddingY: `${ne}px`,
+        fontSize: me,
+        fontWeight: ge
       };
-    }), L = t(() => y.value.disabled), W = t(() => y.value.disabledPreview), m = t(() => y.value.disabledNext), h = t(() => ({
-      display: y.value.display
-    })), R = t(() => {
-      const a = y.value;
+    }), x = t(() => w.value.disabled), R = t(() => w.value.disabledPreview), K = t(() => w.value.disabledNext), p = t(() => ({
+      display: w.value.display
+    })), s = t(() => {
+      const v = w.value;
       return {
-        fontSize: a.fontSize,
-        fontWeight: a.fontWeight
+        fontSize: v.fontSize,
+        fontWeight: v.fontWeight
       };
-    }), s = t(() => {
-      const a = y.value;
+    }), N = t(() => {
+      const v = w.value;
       return {
-        borderRadius: `${a.borderRadius} 0px 0px ${a.borderRadius}`,
-        marginRight: a.marginBetween,
-        padding: `${a.paddingX} ${a.paddingY}`
+        borderRadius: `${v.borderRadius} 0px 0px ${v.borderRadius}`,
+        marginRight: v.marginBetween,
+        padding: `${v.paddingX} ${v.paddingY}`
       };
-    }), $ = t(() => {
-      const a = y.value;
+    }), z = t(() => {
+      const v = w.value;
       return {
-        borderRadius: `0px ${a.borderRadius} ${a.borderRadius} 0px`,
-        marginLeft: a.marginBetween,
-        padding: `${a.paddingX} ${a.paddingY}`
+        borderRadius: `0px ${v.borderRadius} ${v.borderRadius} 0px`,
+        marginLeft: v.marginBetween,
+        padding: `${v.paddingX} ${v.paddingY}`
       };
-    }), g = t(() => `'${S.value ? S.value : "'Lato', sans-serif"}'`), p = t(() => {
-      const a = {};
-      E.value && Object.keys(E.value).forEach((v) => a[`aria-${v}`] = E.value[v]);
-      const o = {
-        "aria-label": j.value,
-        "aria-disabled": W.value,
-        ...a
+    }), B = t(() => U.value === "dark" ? "component__theme--dark" : "component__theme--light"), E = t(() => te.value), h = t(() => j.value), r = t(() => Z.value), i = t(() => F.value);
+    t(() => G.value);
+    const u = t(() => ee.value), n = t(() => W.value), c = t(() => L.value), H = t(() => V.value);
+    t(() => I.value);
+    const oe = t(() => `'${D.value ? D.value : "'Lato', sans-serif"}'`), ie = t(() => {
+      const v = {};
+      Q.value && Object.keys(Q.value).forEach(($) => v[`aria-${$}`] = Q.value[$]);
+      const g = {
+        "aria-label": q.value,
+        "aria-disabled": R.value,
+        ...v
       };
       return Object.fromEntries(
-        Object.entries(o).filter(([d, v]) => v != null)
+        Object.entries(g).filter(([le, $]) => $ != null)
       );
-    }), i = t(() => {
-      const a = {};
-      H.value && Object.keys(H.value).forEach((v) => a[`aria-${v}`] = H.value[v]);
-      const o = {
-        "aria-label": C.value,
-        "aria-disabled": m.value,
-        ...a
+    }), be = t(() => {
+      const v = {};
+      Y.value && Object.keys(Y.value).forEach(($) => v[`aria-${$}`] = Y.value[$]);
+      const g = {
+        "aria-label": y.value,
+        "aria-disabled": K.value,
+        ...v
       };
       return Object.fromEntries(
-        Object.entries(o).filter(([d, v]) => v != null)
+        Object.entries(g).filter(([le, $]) => $ != null)
       );
-    }), r = (a) => {
-      X("clicked", a);
+    }), M = (v) => {
+      X("clicked", v);
     };
-    return (a, o) => e.nbId ? (J(), Q("div", {
+    return (v, g) => e.nbId ? (fe(), ve("div", {
       key: 0,
-      class: ue(["nb-wrapper", L.value]),
-      style: M([h.value])
+      class: pe(["nb-wrapper", x.value]),
+      style: se([p.value])
     }, [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component"]),
-        style: M(R.value)
+        class: pe(["nb-reset", "component", B.value]),
+        style: se(s.value)
       }, [
-        e.showPreview ? (J(), Q("div", ie({
+        e.showPreview ? (fe(), ve("div", Se({
           key: 0,
-          class: ["buttonNextPreview buttonPreview", W.value],
-          style: s.value,
+          class: ["buttonNextPreview buttonPreview", R.value],
+          style: N.value,
           tabIndex: e.tabIndexPrev,
           role: "button"
-        }, p.value, {
-          onClick: o[0] || (o[0] = (d) => r("preview")),
+        }, ie.value, {
+          onClick: g[0] || (g[0] = (le) => M("preview")),
           onKeydown: [
-            o[1] || (o[1] = Y(z((d) => !B(V) && e.hasTabIndexEnter && r("preview"), ["prevent"]), ["enter"])),
-            o[2] || (o[2] = Y(z((d) => !B(V) && e.hasTabIndexSpace && r("preview"), ["prevent"]), ["space"]))
+            g[1] || (g[1] = O(A((le) => !o(d) && e.hasTabIndexEnter && M("preview"), ["prevent"]), ["enter"])),
+            g[2] || (g[2] = O(A((le) => !o(d) && e.hasTabIndexSpace && M("preview"), ["prevent"]), ["space"]))
           ]
         }), [
-          oe(a.$slots, "prev", {}, () => [
-            o[6] || (o[6] = re("← Preview"))
+          he(v.$slots, "prev", {}, () => [
+            g[6] || (g[6] = Ce("← Preview"))
           ], !0)
-        ], 16, kt)) : te("", !0),
-        e.showNext ? (J(), Q("div", ie({
+        ], 16, Dt)) : ye("", !0),
+        e.showNext ? (fe(), ve("div", Se({
           key: 1,
-          class: ["buttonNextPreview buttonNext", m.value],
-          style: $.value,
+          class: ["buttonNextPreview buttonNext", K.value],
+          style: z.value,
           tabIndex: e.tabIndexNext,
           role: "button"
-        }, i.value, {
-          onClick: o[3] || (o[3] = (d) => r("next")),
+        }, be.value, {
+          onClick: g[3] || (g[3] = (le) => M("next")),
           onKeydown: [
-            o[4] || (o[4] = Y(z((d) => !B(V) && e.hasTabIndexEnter && r("next"), ["prevent"]), ["enter"])),
-            o[5] || (o[5] = Y(z((d) => !B(V) && e.hasTabIndexSpace && r("next"), ["prevent"]), ["space"]))
+            g[4] || (g[4] = O(A((le) => !o(d) && e.hasTabIndexEnter && M("next"), ["prevent"]), ["enter"])),
+            g[5] || (g[5] = O(A((le) => !o(d) && e.hasTabIndexSpace && M("next"), ["prevent"]), ["space"]))
           ]
         }), [
-          oe(a.$slots, "next", {}, () => [
-            o[7] || (o[7] = re("Next →"))
+          he(v.$slots, "next", {}, () => [
+            g[7] || (g[7] = Ce("Next →"))
           ], !0)
-        ], 16, Ot)) : te("", !0)
-      ], 12, Tt)
-    ], 6)) : te("", !0);
+        ], 16, Nt)) : ye("", !0)
+      ], 14, _t)
+    ], 6)) : ye("", !0);
   }
-}), _t = /* @__PURE__ */ ve(Wt, [["__scopeId", "data-v-26e28541"]]);
-const Rt = ["tabIndex"], zt = ["id"], Lt = /* @__PURE__ */ Object.assign({
+}), At = /* @__PURE__ */ ke(Ht, [["__scopeId", "data-v-a0020765"]]);
+const Lt = ["tabIndex"], Ot = ["id"], Wt = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical",
   inheritAttrs: !1
 }, {
@@ -672,8 +814,8 @@ const Rt = ["tabIndex"], zt = ["id"], Lt = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -696,17 +838,47 @@ const Rt = ["tabIndex"], zt = ["id"], Lt = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "#ffffff"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    containerColor: {
+    // Cores do tema light
+    lightTextColor: {
       type: String,
-      default: "#ffffff"
+      default: "#333333"
     },
-    buttonColor: {
+    lightButtonColor: {
       type: String,
-      default: "#bbbbbb"
+      default: "#f5f5f5"
+    },
+    lightContainerColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkContainerColor: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     paddingX: {
       type: Number,
@@ -747,97 +919,104 @@ const Rt = ["tabIndex"], zt = ["id"], Lt = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((i) => ({
-      "054e8c9a": R.value,
-      "381e6ca6": B(H),
-      "1ae3f0ab": $.value,
-      "4678e610": s.value
+  setup(e, { emit: l }) {
+    xe((h) => ({
+      "448924c5": x.value,
+      "524d021d": p.value,
+      d03582ca: R.value,
+      "7ac75b14": K.value,
+      e834105a: z.value,
+      d629e1b6: s.value,
+      d51faf00: N.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      textColor: A,
-      containerColor: O,
-      paddingX: N,
-      paddingY: x,
-      borderRadius: V,
-      disabled: w,
-      animationSlow: I,
-      fontFamily: S,
-      fontSize: T,
-      fontWeight: f
-    } = ce(D), y = t(() => {
-      const i = w.value ? "component-disabled" : "", r = j.value !== "b" ? "inline-block" : "block", a = O.value ? O.value : "#ffffff", o = H.value ? H.value : "#bbbbbb", d = A.value ? A.value : "#ffffff", v = !N.value || N.value < 0 ? 1 : N.value, u = !x.value || x.value < 0 ? 0.2 : x.value, n = !V.value || V.value < 0 ? 0 : V.value, c = I.value ? "" : "component-transition__no-slow", k = S.value ? S.value : "'Lato', sans-serif", F = T.value ? T.value : "1.6em", G = !f.value || f.value < 0 ? 100 : f.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightButtonColor: te,
+      lightContainerColor: j,
+      lightDisabledBgColor: Z,
+      darkTextColor: F,
+      darkButtonColor: G,
+      darkContainerColor: ee,
+      darkDisabledBgColor: W,
+      paddingX: L,
+      paddingY: V,
+      borderRadius: I,
+      disabled: b,
+      animationSlow: T,
+      fontFamily: f,
+      fontSize: m,
+      fontWeight: d
+    } = Be(ae), _ = t(() => {
+      const h = b.value ? "component-disabled" : "", r = q.value !== "b" ? "inline-block" : "block", i = !L.value || L.value < 0 ? 1 : L.value, u = !V.value || V.value < 0 ? 0.2 : V.value, n = !I.value || I.value < 0 ? 0 : I.value, c = T.value ? "" : "component-transition__no-slow", H = f.value ? f.value : "'Lato', sans-serif", oe = m.value ? m.value : "1.6em", ie = !d.value || d.value < 0 ? 100 : d.value;
       return {
-        disabled: i,
+        disabled: h,
         display: r,
-        containerColor: a,
-        buttonColor: o,
-        textColor: d,
-        paddingX: v,
+        paddingX: i,
         paddingY: u,
         borderRadius: n,
         animationSlow: c,
-        font: k,
-        fontSize: F,
-        fontWeight: G
+        font: H,
+        fontSize: oe,
+        fontWeight: ie
       };
-    }), L = t(() => y.value.disabled), W = t(() => ({
-      display: y.value.display
-    })), m = t(() => {
-      const i = y.value;
+    }), S = t(() => _.value.disabled), D = t(() => ({
+      display: _.value.display
+    })), P = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), J = t(() => {
+      const h = _.value;
       return {
-        border: `2px solid ${i.containerColor}`,
-        color: i.textColor,
-        backgroundColor: i.buttonColor,
-        padding: `${i.paddingY}rem ${i.paddingX}rem`,
-        borderRadius: `${i.borderRadius}rem`,
-        fontSize: i.fontSize,
-        fontWeight: i.fontWeight
+        padding: `${h.paddingY}rem ${h.paddingX}rem`,
+        borderRadius: `${h.borderRadius}rem`,
+        fontSize: h.fontSize,
+        fontWeight: h.fontWeight
       };
-    }), h = t(() => y.value.animationSlow), R = t(() => y.value.font), s = t(() => y.value.textColor), $ = t(() => y.value.buttonColor), g = t(() => {
-      const i = {};
-      C.value && Object.keys(C.value).forEach((o) => i[`aria-${o}`] = C.value[o]);
+    }), w = t(() => _.value.animationSlow), x = t(() => _.value.font), R = t(() => U.value), K = t(() => te.value), p = t(() => j.value);
+    t(() => Z.value);
+    const s = t(() => F.value), N = t(() => G.value), z = t(() => ee.value);
+    t(() => W.value);
+    const B = t(() => {
+      const h = {};
+      y.value && Object.keys(y.value).forEach((u) => h[`aria-${u}`] = y.value[u]);
       const r = {
-        "aria-label": E.value,
-        "aria-disabled": w.value,
-        ...i
+        "aria-label": Q.value,
+        "aria-disabled": b.value,
+        ...h
       };
       return Object.fromEntries(
-        Object.entries(r).filter(([a, o]) => o != null)
+        Object.entries(r).filter(([i, u]) => u != null)
       );
-    }), p = () => {
+    }), E = () => {
       X("clicked");
     };
-    return (i, r) => e.nbId ? (J(), Q("div", ie({
+    return (h, r) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", L.value],
-      style: [W.value],
+      class: ["nb-wrapper", S.value],
+      style: [D.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, g.value, {
-      onClick: p,
+    }, B.value, {
+      onClick: E,
       onKeydown: [
-        r[0] || (r[0] = Y(z((a) => !B(w) && e.hasTabIndexEnter && p(), ["prevent"]), ["enter"])),
-        r[1] || (r[1] = Y(z((a) => !B(w) && e.hasTabIndexSpace && p(), ["prevent"]), ["space"]))
+        r[0] || (r[0] = O(A((i) => !o(b) && e.hasTabIndexEnter && E(), ["prevent"]), ["enter"])),
+        r[1] || (r[1] = O(A((i) => !o(b) && e.hasTabIndexSpace && E(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component", "component-transition", h.value]),
-        style: M([m.value])
+        class: pe(["nb-reset", "component", "component-transition", w.value, P.value]),
+        style: se([J.value])
       }, [
-        oe(i.$slots, "content", {}, () => [
-          r[2] || (r[2] = re("Default Text"))
+        he(h.$slots, "content", {}, () => [
+          r[2] || (r[2] = Ce("Default Text"))
         ], !0)
-      ], 14, zt)
-    ], 16, Rt)) : te("", !0);
+      ], 14, Ot)
+    ], 16, Lt)) : ye("", !0);
   }
-}), Yt = /* @__PURE__ */ ve(Lt, [["__scopeId", "data-v-10b90c6b"]]);
-const Xt = ["tabIndex"], jt = ["id"], Et = /* @__PURE__ */ Object.assign({
+}), Rt = /* @__PURE__ */ ke(Wt, [["__scopeId", "data-v-5b33e712"]]);
+const zt = ["tabIndex"], Yt = ["id"], Xt = /* @__PURE__ */ Object.assign({
   name: "NbButtonMechanical2",
   inheritAttrs: !1
 }, {
@@ -851,8 +1030,8 @@ const Xt = ["tabIndex"], jt = ["id"], Et = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -875,17 +1054,47 @@ const Xt = ["tabIndex"], jt = ["id"], Et = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "#ffffff"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    buttonColor: {
+    // Cores do tema light
+    lightTextColor: {
       type: String,
-      default: "#bbbbbb"
+      default: "#333333"
+    },
+    lightButtonColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightShadowColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkShadowColor: {
+      type: String,
+      default: "#3d3d3d"
     },
-    shadowColor: {
+    darkDisabledBgColor: {
       type: String,
-      default: "#002f3c"
+      default: "rgba(40, 42, 54, 1)"
     },
     paddingX: {
       type: Number,
@@ -922,93 +1131,102 @@ const Xt = ["tabIndex"], jt = ["id"], Et = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((s) => ({
-      "636cd609": m.value
+  setup(e, { emit: l }) {
+    xe((B) => ({
+      "5792e749": s.value,
+      "69d4b8d2": J.value,
+      "29712f1c": w.value,
+      "121dc978": x.value,
+      "8047caae": R.value,
+      "6f6739f8": K.value,
+      "5813d454": p.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      textColor: A,
-      paddingX: O,
-      paddingY: N,
-      borderRadius: x,
-      shadowColor: V,
-      disabled: w,
-      fontFamily: I,
-      fontSize: S,
-      fontWeight: T
-    } = ce(D), f = t(() => {
-      const s = w.value ? "component-disabled" : "", $ = j.value !== "b" ? "inline-block" : "block", g = H.value ? H.value : "#bbbbbb", p = V.value ? V.value : "#002f3c", i = A.value ? A.value : "#ffffff", r = !O.value || O.value < 0 ? 1 : O.value, a = !N.value || N.value < 0 ? 1 : N.value, o = !x.value || x.value < 0 ? 0 : x.value, d = I.value ? I.value : "'Lato', sans-serif", v = S.value ? S.value : "1.6em", u = !T.value || T.value < 0 ? 100 : T.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightButtonColor: te,
+      lightShadowColor: j,
+      lightDisabledBgColor: Z,
+      darkTextColor: F,
+      darkButtonColor: G,
+      darkShadowColor: ee,
+      darkDisabledBgColor: W,
+      paddingX: L,
+      paddingY: V,
+      borderRadius: I,
+      disabled: b,
+      fontFamily: T,
+      fontSize: f,
+      fontWeight: m
+    } = Be(ae), d = t(() => {
+      const B = b.value ? "component-disabled" : "", E = q.value !== "b" ? "inline-block" : "block", h = !L.value || L.value < 0 ? 1 : L.value, r = !V.value || V.value < 0 ? 1 : V.value, i = !I.value || I.value < 0 ? 0 : I.value, u = T.value ? T.value : "'Lato', sans-serif", n = f.value ? f.value : "1.6em", c = !m.value || m.value < 0 ? 100 : m.value;
       return {
-        disabled: s,
-        display: $,
-        buttonColor: g,
-        shadowColor: p,
-        textColor: i,
-        paddingX: r,
-        paddingY: a,
-        borderRadius: o,
-        font: d,
-        fontSize: v,
-        fontWeight: u
+        disabled: B,
+        display: E,
+        paddingX: h,
+        paddingY: r,
+        borderRadius: i,
+        font: u,
+        fontSize: n,
+        fontWeight: c
       };
-    }), y = t(() => f.value.disabled), L = t(() => ({
-      display: f.value.display
-    })), W = t(() => {
-      const s = f.value;
+    }), _ = t(() => d.value.disabled), S = t(() => ({
+      display: d.value.display
+    })), D = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), P = t(() => {
+      const B = d.value;
       return {
-        color: s.textColor,
-        backgroundColor: s.buttonColor,
-        boxShadow: `0 0 #0000, 0 0 #0000, 3px 3px 0 ${s.shadowColor}`,
-        padding: `${s.paddingY}rem ${s.paddingX}rem`,
-        padding: `${s.paddingY}rem ${s.paddingX}rem`,
-        borderRadius: `${s.borderRadius}rem`,
-        fontSize: s.fontSize,
-        fontWeight: s.fontWeight
+        padding: `${B.paddingY}rem ${B.paddingX}rem`,
+        borderRadius: `${B.borderRadius}rem`,
+        fontSize: B.fontSize,
+        fontWeight: B.fontWeight
       };
-    }), m = t(() => f.value.font), h = t(() => {
-      const s = {};
-      C.value && Object.keys(C.value).forEach((p) => s[`aria-${p}`] = C.value[p]);
-      const $ = {
-        "aria-label": E.value,
-        "aria-disabled": w.value,
-        ...s
+    }), J = t(() => U.value), w = t(() => te.value), x = t(() => j.value);
+    t(() => Z.value);
+    const R = t(() => F.value), K = t(() => G.value), p = t(() => ee.value);
+    t(() => W.value);
+    const s = t(() => d.value.font), N = t(() => {
+      const B = {};
+      y.value && Object.keys(y.value).forEach((r) => B[`aria-${r}`] = y.value[r]);
+      const E = {
+        "aria-label": Q.value,
+        "aria-disabled": b.value,
+        ...B
       };
       return Object.fromEntries(
-        Object.entries($).filter(([g, p]) => p != null)
+        Object.entries(E).filter(([h, r]) => r != null)
       );
-    }), R = () => {
+    }), z = () => {
       X("clicked");
     };
-    return (s, $) => e.nbId ? (J(), Q("div", ie({
+    return (B, E) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", y.value],
-      style: [L.value],
+      class: ["nb-wrapper", _.value],
+      style: [S.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, h.value, {
-      onClick: R,
+    }, N.value, {
+      onClick: z,
       onKeydown: [
-        $[0] || ($[0] = Y(z((g) => !B(w) && e.hasTabIndexEnter && R(), ["prevent"]), ["enter"])),
-        $[1] || ($[1] = Y(z((g) => !B(w) && e.hasTabIndexSpace && R(), ["prevent"]), ["space"]))
+        E[0] || (E[0] = O(A((h) => !o(b) && e.hasTabIndexEnter && z(), ["prevent"]), ["enter"])),
+        E[1] || (E[1] = O(A((h) => !o(b) && e.hasTabIndexSpace && z(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component", "component-transition"]),
-        style: M([W.value])
+        class: pe(["nb-reset", "component", "component-transition", D.value]),
+        style: se([P.value])
       }, [
-        oe(s.$slots, "content", {}, () => [
-          $[2] || ($[2] = re("Default Text"))
+        he(B.$slots, "content", {}, () => [
+          E[2] || (E[2] = Ce("Default Text"))
         ], !0)
-      ], 12, jt)
-    ], 16, Xt)) : te("", !0);
+      ], 14, Yt)
+    ], 16, zt)) : ye("", !0);
   }
-}), Ft = /* @__PURE__ */ ve(Et, [["__scopeId", "data-v-03d1f538"]]);
-const Dt = ["tabIndex"], Kt = ["id"], Pt = /* @__PURE__ */ Object.assign({
+}), jt = /* @__PURE__ */ ke(Xt, [["__scopeId", "data-v-2c06324b"]]);
+const Et = ["tabIndex"], Ft = ["id"], Pt = /* @__PURE__ */ Object.assign({
   name: "NbButtonHamburger",
   inheritAttrs: !1
 }, {
@@ -1038,26 +1256,60 @@ const Dt = ["tabIndex"], Kt = ["id"], Pt = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
+    theme: {
+      type: String,
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
+    },
     status: {
       type: Boolean,
       default: !1,
       validator: (e) => [!1, !0].includes(e)
     },
-    color: {
+    // Cores do tema light
+    lightColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightColorHover: {
+      type: String,
+      default: "#000000"
+    },
+    lightContainerColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightContainerColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkColorHover: {
       type: String,
       default: "#ffffff"
     },
-    colorHover: {
+    darkContainerColor: {
       type: String,
-      default: "yellow"
+      default: "#2d2d2d"
     },
-    containerColor: {
+    darkContainerColorHover: {
       type: String,
-      default: "#333333"
+      default: "#3d3d3d"
     },
-    containerColorHover: {
+    darkDisabledBgColor: {
       type: String,
-      default: "red"
+      default: "rgba(40, 42, 54, 1)"
     },
     paddingX: {
       type: Number,
@@ -1076,97 +1328,105 @@ const Dt = ["tabIndex"], Kt = ["id"], Pt = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((s) => ({
-      c02073b6: W.value,
-      "400bc80e": m.value
+  setup(e, { emit: l }) {
+    xe((r) => ({
+      "00101ecc": x.value,
+      bbf5ed78: N.value,
+      "1b9a19d0": R.value,
+      "51f8cffa": w.value,
+      a6260b50: z.value,
+      "47407e7b": s.value,
+      "75874cb9": J.value,
+      "6b023b41": p.value,
+      "4a4cd9d8": K.value,
+      32158340: B.value
     }));
-    const X = b, D = e;
-    He(() => {
-      j.value = H.value;
+    const X = l, ae = e;
+    Ee(() => {
+      q.value = U.value;
     });
-    const j = me(!1), {
-      ariaLabel: E,
-      ariaAttrs: C,
-      status: H,
-      color: A,
-      containerColor: O,
-      containerColorHover: N,
-      colorHover: x,
-      paddingX: V,
-      paddingY: w,
-      disabled: I
-    } = ce(D), S = t(() => {
-      const s = I.value ? "component-disabled" : "", $ = j.value ? "change" : "", g = O.value ? O.value : "#333333", p = A.value ? A.value : "#ffffff", i = !V.value || V.value < 0 ? 3 : V.value, r = !w.value || w.value < 0 ? 3 : w.value, a = N.value ? N.value : "yellow", o = x.value ? x.value : "red";
+    const q = Te(!1), {
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      status: U,
+      lightColor: te,
+      lightColorHover: j,
+      lightContainerColor: Z,
+      lightContainerColorHover: F,
+      lightDisabledBgColor: G,
+      darkColor: ee,
+      darkColorHover: W,
+      darkContainerColor: L,
+      darkContainerColorHover: V,
+      darkDisabledBgColor: I,
+      paddingX: b,
+      paddingY: T,
+      disabled: f
+    } = Be(ae), m = t(() => {
+      const r = f.value ? "component-disabled" : "", i = q.value ? "change" : "", u = !b.value || b.value < 0 ? 3 : b.value, n = !T.value || T.value < 0 ? 3 : T.value;
       return {
-        disabled: s,
-        buttonStatus: $,
-        containerColor: g,
-        paddingX: i,
-        paddingY: r,
-        color: p,
-        containerColorHover: a,
-        colorHover: o
+        disabled: r,
+        buttonStatus: i,
+        paddingX: u,
+        paddingY: n
       };
-    }), T = t(() => S.value.disabled), f = t(() => {
-      const s = S.value;
+    }), d = t(() => m.value.disabled), _ = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), S = t(() => {
+      const r = m.value;
       return {
-        padding: `${s.paddingY}px ${s.paddingX}px`,
-        backgroundColor: s.containerColor
+        padding: `${r.paddingY}px ${r.paddingX}px`
       };
-    }), y = t(() => ({
-      backgroundColor: S.value.color
-    })), L = t(() => S.value.buttonStatus), W = t(() => S.value.containerColorHover), m = t(() => S.value.colorHover), h = t(() => {
-      const s = {};
-      C.value && Object.keys(C.value).forEach((p) => s[`aria-${p}`] = C.value[p]);
-      const $ = {
-        "aria-label": E.value,
-        "aria-disabled": I.value,
-        ...s
+    }), D = t(() => ({})), P = t(() => m.value.buttonStatus), J = t(() => te.value), w = t(() => j.value), x = t(() => Z.value), R = t(() => F.value), K = t(() => G.value), p = t(() => ee.value), s = t(() => W.value), N = t(() => L.value), z = t(() => V.value), B = t(() => I.value), E = t(() => {
+      const r = {};
+      y.value && Object.keys(y.value).forEach((n) => r[`aria-${n}`] = y.value[n]);
+      const i = {
+        "aria-label": Q.value,
+        "aria-disabled": f.value,
+        ...r
       };
       return Object.fromEntries(
-        Object.entries($).filter(([g, p]) => p != null)
+        Object.entries(i).filter(([u, n]) => n != null)
       );
-    }), R = () => {
-      const s = !j.value;
-      j.value = s, X("clicked", s);
+    }), h = () => {
+      const r = !q.value;
+      q.value = r, X("clicked", r);
     };
-    return gt(H, () => {
-      j.value = H.value;
-    }), (s, $) => e.nbId ? (J(), Q("div", ie({
+    return yt(U, () => {
+      q.value = U.value;
+    }), (r, i) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", T.value],
-      style: [f.value],
+      class: ["nb-wrapper", d.value],
+      style: [S.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, h.value, {
-      onClick: R,
+    }, E.value, {
+      onClick: h,
       onKeydown: [
-        $[0] || ($[0] = Y(z((g) => !B(I) && e.hasTabIndexEnter && R(), ["prevent"]), ["enter"])),
-        $[1] || ($[1] = Y(z((g) => !B(I) && e.hasTabIndexSpace && R(), ["prevent"]), ["space"]))
+        i[0] || (i[0] = O(A((u) => !o(f) && e.hasTabIndexEnter && h(), ["prevent"]), ["enter"])),
+        i[1] || (i[1] = O(A((u) => !o(f) && e.hasTabIndexSpace && h(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component", L.value])
+        class: pe(["nb-reset", "component", P.value, _.value])
       }, [
-        P("div", {
+        de("div", {
           class: "component__line-one",
-          style: M(y.value)
+          style: se(D.value)
         }, null, 4),
-        P("div", {
+        de("div", {
           class: "component__line-two",
-          style: M(y.value)
+          style: se(D.value)
         }, null, 4),
-        P("div", {
+        de("div", {
           class: "component__line-three",
-          style: M(y.value)
+          style: se(D.value)
         }, null, 4)
-      ], 10, Kt)
-    ], 16, Dt)) : te("", !0);
+      ], 10, Ft)
+    ], 16, Et)) : ye("", !0);
   }
-}), qt = /* @__PURE__ */ ve(Pt, [["__scopeId", "data-v-4f7a923d"]]);
-const Mt = ["tabIndex"], Ut = ["id"], Gt = /* @__PURE__ */ Object.assign({
+}), Kt = /* @__PURE__ */ ke(Pt, [["__scopeId", "data-v-ff42dd2c"]]);
+const Mt = ["tabIndex"], qt = ["id"], Ut = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorOutside",
   inheritAttrs: !1
 }, {
@@ -1180,8 +1440,8 @@ const Mt = ["tabIndex"], Ut = ["id"], Gt = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -1204,17 +1464,47 @@ const Mt = ["tabIndex"], Ut = ["id"], Gt = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "#ffffff"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    buttonColor: {
+    // Cores do tema light
+    lightTextColor: {
       type: String,
-      default: "#bbbbbb"
+      default: "#333333"
     },
-    borderColor: {
+    lightButtonColor: {
       type: String,
-      default: "#ffe54c"
+      default: "#f5f5f5"
+    },
+    lightBorderColor: {
+      type: String,
+      default: "#cccccc"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkBorderColor: {
+      type: String,
+      default: "#555555"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     paddingX: {
       type: Number,
@@ -1251,104 +1541,111 @@ const Mt = ["tabIndex"], Ut = ["id"], Gt = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((i) => ({
-      "69e1c3e4": R.value,
-      ea9c17c2: $.value,
-      "7c559d9c": h.value,
-      "45cd92f8": s.value
+  setup(e, { emit: l }) {
+    xe((i) => ({
+      "3be64e20": w.value,
+      "210653ca": J.value,
+      "336a5840": R.value,
+      b91b2c7e: p.value,
+      "0df1aa7b": K.value,
+      "0ae98580": N.value,
+      ad8409be: B.value,
+      "13bd3bdb": z.value,
+      "9e47a3a8": s.value,
+      "4c7fe0e8": E.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      borderColor: A,
-      textColor: O,
-      paddingX: N,
-      paddingY: x,
-      borderRadius: V,
-      disabled: w,
-      fontFamily: I,
-      fontSize: S,
-      fontWeight: T
-    } = ce(D), f = t(() => {
-      const i = w.value ? "component-disabled" : "", r = j.value !== "b" ? "inline-block" : "block", a = H.value ? H.value : "#bbbbbb", o = A.value ? A.value : "#ffe54c", d = O.value ? O.value : "#ffffff", v = !N.value || N.value < 0 ? 1 : N.value, u = !x.value || x.value < 0 ? 0.2 : x.value, n = !V.value || V.value < 0 ? 0 : V.value, c = I.value ? I.value : "'Lato', sans-serif", k = S.value ? S.value : "1.6em", F = !T.value || T.value < 0 ? 200 : T.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightButtonColor: te,
+      lightBorderColor: j,
+      lightDisabledBgColor: Z,
+      darkTextColor: F,
+      darkButtonColor: G,
+      darkBorderColor: ee,
+      darkDisabledBgColor: W,
+      paddingX: L,
+      paddingY: V,
+      borderRadius: I,
+      disabled: b,
+      fontFamily: T,
+      fontSize: f,
+      fontWeight: m
+    } = Be(ae), d = t(() => {
+      const i = b.value ? "component-disabled" : "", u = q.value !== "b" ? "inline-block" : "block", n = !L.value || L.value < 0 ? 1 : L.value, c = !V.value || V.value < 0 ? 0.2 : V.value, H = !I.value || I.value < 0 ? 0 : I.value, oe = T.value ? T.value : "'Lato', sans-serif", ie = f.value ? f.value : "1.6em", be = !m.value || m.value < 0 ? 200 : m.value;
       return {
         disabled: i,
-        display: r,
-        buttonColor: a,
-        borderColor: o,
-        textColor: d,
-        paddingX: v,
-        paddingY: u,
-        borderRadius: n,
-        font: c,
-        fontSize: k,
-        fontWeight: F
+        display: u,
+        paddingX: n,
+        paddingY: c,
+        borderRadius: H,
+        font: oe,
+        fontSize: ie,
+        fontWeight: be
       };
-    }), y = t(() => f.value.disabled), L = t(() => ({
-      display: f.value.display
-    })), W = t(() => {
-      const i = f.value;
+    }), _ = t(() => d.value.disabled), S = t(() => ({
+      display: d.value.display
+    })), D = t(() => {
+      const i = d.value;
       return {
-        color: i.textColor,
         fontSize: i.fontSize,
         fontWeight: i.fontWeight
       };
-    }), m = t(() => {
-      const i = f.value;
+    }), P = t(() => {
+      const i = d.value;
       return {
         padding: `${i.paddingY}rem ${i.paddingX}rem`,
-        border: `1px solid ${i.borderColor}`,
-        borderRadius: h.value
+        borderRadius: J.value
       };
-    }), h = t(() => `${f.value.borderRadius}rem`), R = t(() => f.value.font), s = t(() => f.value.textColor), $ = t(() => f.value.buttonColor), g = t(() => {
+    }), J = t(() => `${d.value.borderRadius}rem`), w = t(() => d.value.font), x = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), R = t(() => U.value), K = t(() => te.value), p = t(() => j.value), s = t(() => Z.value), N = t(() => F.value), z = t(() => G.value), B = t(() => ee.value), E = t(() => W.value), h = t(() => {
       const i = {};
-      C.value && Object.keys(C.value).forEach((o) => i[`aria-${o}`] = C.value[o]);
-      const r = {
-        "aria-label": E.value,
-        "aria-disabled": w.value,
+      y.value && Object.keys(y.value).forEach((c) => i[`aria-${c}`] = y.value[c]);
+      const u = {
+        "aria-label": Q.value,
+        "aria-disabled": b.value,
         ...i
       };
       return Object.fromEntries(
-        Object.entries(r).filter(([a, o]) => o != null)
+        Object.entries(u).filter(([n, c]) => c != null)
       );
-    }), p = () => {
+    }), r = () => {
       X("clicked");
     };
-    return (i, r) => e.nbId ? (J(), Q("div", ie({
+    return (i, u) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", y.value],
-      style: [L.value],
+      class: ["nb-wrapper", _.value],
+      style: [S.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, g.value, {
-      onClick: p,
+    }, h.value, {
+      onClick: r,
       onKeydown: [
-        r[0] || (r[0] = Y(z((a) => !B(w) && e.hasTabIndexEnter && p(), ["prevent"]), ["enter"])),
-        r[1] || (r[1] = Y(z((a) => !B(w) && e.hasTabIndexSpace && p(), ["prevent"]), ["space"]))
+        u[0] || (u[0] = O(A((n) => !o(b) && e.hasTabIndexEnter && r(), ["prevent"]), ["enter"])),
+        u[1] || (u[1] = O(A((n) => !o(b) && e.hasTabIndexSpace && r(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component"]),
-        style: M([W.value])
+        class: pe(["nb-reset", "component", x.value]),
+        style: se([D.value])
       }, [
-        P("div", {
+        de("div", {
           class: "component-content",
-          style: M([m.value])
+          style: se([P.value])
         }, [
-          oe(i.$slots, "content", {}, () => [
-            r[2] || (r[2] = re("Default Text"))
+          he(i.$slots, "content", {}, () => [
+            u[2] || (u[2] = Ce("Default Text"))
           ], !0)
         ], 4),
-        r[3] || (r[3] = P("div", { class: "component-shadow" }, null, -1))
-      ], 12, Ut)
-    ], 16, Mt)) : te("", !0);
+        u[3] || (u[3] = de("div", { class: "component-shadow" }, null, -1))
+      ], 14, qt)
+    ], 16, Mt)) : ye("", !0);
   }
-}), Jt = /* @__PURE__ */ ve(Gt, [["__scopeId", "data-v-6354933f"]]);
-const Qt = ["tabIndex"], Zt = ["id"], ea = /* @__PURE__ */ Object.assign({
+}), Gt = /* @__PURE__ */ ke(Ut, [["__scopeId", "data-v-81403966"]]);
+const Jt = ["tabIndex"], Qt = ["id"], Zt = /* @__PURE__ */ Object.assign({
   name: "NbButtonColorHover",
   inheritAttrs: !1
 }, {
@@ -1362,8 +1659,8 @@ const Qt = ["tabIndex"], Zt = ["id"], ea = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e.toLowerCase();
-        return ["b", "ib"].includes(b);
+        const l = e.toLowerCase();
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -1386,10 +1683,6 @@ const Qt = ["tabIndex"], Zt = ["id"], ea = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
-      type: String,
-      default: "#ffffff"
-    },
     paddingX: {
       type: Number,
       default: 1,
@@ -1404,18 +1697,6 @@ const Qt = ["tabIndex"], Zt = ["id"], ea = /* @__PURE__ */ Object.assign({
       type: Number,
       default: 0.375
     },
-    textColorHover: {
-      type: String,
-      default: "#cccccc"
-    },
-    buttonColor: {
-      type: String,
-      default: "#bbbbbb"
-    },
-    buttonColorHover: {
-      type: String,
-      default: "#959595"
-    },
     disabled: {
       type: Boolean,
       default: !1,
@@ -1434,103 +1715,166 @@ const Qt = ["tabIndex"], Zt = ["id"], ea = /* @__PURE__ */ Object.assign({
       type: Number,
       default: 400,
       validator: (e) => e || 700
+    },
+    theme: {
+      type: String,
+      default: "light",
+      validator: (e) => ["dark", "light"].indexOf(e) !== -1
+    },
+    // Cores do tema light
+    lightButtonColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightButtonColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
+      type: String,
+      default: "#000000"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((r) => ({
-      "7dc2cdce": h.value,
-      "160236aa": $.value,
-      f2da7aa6: s.value,
-      b19b869c: g.value,
-      "141e9fcf": R.value
+  setup(e, { emit: l }) {
+    xe((p) => ({
+      "5def56df": w.value,
+      "0338fad0": o(m),
+      b01c552a: o(T),
+      "426e204c": o(d),
+      "4ca6a2de": o(f),
+      "19566f60": o(V),
+      "005042eb": o(W),
+      "51d27a68": o(I),
+      "32929dde": o(L),
+      b0253dc8: o(_),
+      af4de2c8: o(b)
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      textColor: H,
-      paddingX: A,
-      paddingY: O,
-      borderRadius: N,
-      disabled: x,
-      fontFamily: V,
-      fontSize: w,
-      fontWeight: I,
-      textColorHover: S,
-      buttonColor: T,
-      buttonColorHover: f
-    } = ce(D), y = t(() => {
-      const r = x.value ? "component-disabled" : "", a = j.value !== "b" ? "inline-block" : "block", o = H ? H.value : "ffffff", d = !A.value || A.value < 0 ? 1 : A.value, v = !O.value || O.value < 0 ? 0.2 : O.value, u = !N.value || N.value < 0 ? 0 : N.value, n = V.value ? V.value : "'Lato', sans-serif", c = w.value ? w.value : "1.6rem", k = !I.value || I.value < 0 ? 100 : I.value, F = S.value ? S.value : "#cccccc", G = T.value ? T.value : "#bbbbbb", le = f.value ? f.value : "#959595";
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      paddingX: Y,
+      paddingY: U,
+      borderRadius: te,
+      disabled: j,
+      fontFamily: Z,
+      fontSize: F,
+      fontWeight: G,
+      theme: ee,
+      lightButtonColor: W,
+      lightButtonColorHover: L,
+      lightTextColor: V,
+      lightTextColorHover: I,
+      lightDisabledBgColor: b,
+      darkButtonColor: T,
+      darkButtonColorHover: f,
+      darkTextColor: m,
+      darkTextColorHover: d,
+      darkDisabledBgColor: _
+    } = Be(ae), S = t(() => {
+      const p = j.value ? "component-disabled" : "", s = q.value !== "b" ? "inline-block" : "block", N = !Y.value || Y.value < 0 ? 1 : Y.value, z = !U.value || U.value < 0 ? 0.2 : U.value, B = !te.value || te.value < 0 ? 0 : te.value, E = Z.value ? Z.value : "'Lato', sans-serif", h = F.value ? F.value : "1.6rem", r = !G.value || G.value < 0 ? 100 : G.value, i = ee.value ? ee.value : "light";
       return {
-        disabled: r,
-        display: a,
-        font: n,
-        fontSize: c,
-        fontWeight: k,
-        textColor: o,
-        paddingX: d,
-        paddingY: v,
-        borderRadius: u,
-        textColorHover: F,
-        buttonColor: G,
-        buttonColorHover: le
+        disabled: p,
+        display: s,
+        font: E,
+        fontSize: h,
+        fontWeight: r,
+        paddingX: N,
+        paddingY: z,
+        borderRadius: B,
+        theme: i
       };
-    }), L = t(() => y.value.disabled), W = t(() => {
-      const r = y.value;
+    }), D = t(() => S.value.disabled), P = t(() => {
+      const p = S.value;
       return {
-        display: r.display,
-        borderRadius: `${r.borderRadius}rem`
+        display: p.display,
+        borderRadius: `${p.borderRadius}rem`
       };
-    }), m = t(() => {
-      const r = y.value;
+    }), J = t(() => {
+      const p = S.value;
       return {
-        color: r.textColor,
-        padding: `${r.paddingY}rem ${r.paddingX}rem`,
-        borderRadius: `${r.borderRadius}rem`,
-        fontSize: r.fontSize,
-        fontWeight: r.fontWeight
+        padding: `${p.paddingY}rem ${p.paddingX}rem`,
+        borderRadius: `${p.borderRadius}rem`,
+        fontSize: p.fontSize,
+        fontWeight: p.fontWeight
       };
-    }), h = t(() => y.value.font), R = t(() => y.value.textColor), s = t(() => y.value.textColorHover), $ = t(() => y.value.buttonColor), g = t(() => y.value.buttonColorHover), p = t(() => {
-      const r = {};
-      C.value && Object.keys(C.value).forEach((d) => r[`aria-${d}`] = C.value[d]);
-      const a = {
-        "aria-label": E.value,
-        "aria-disabled": x.value,
-        ...r
+    }), w = t(() => S.value.font), x = t(() => {
+      switch (S.value.theme) {
+        case "dark":
+          return "component__theme--dark";
+        default:
+          return "component__theme--light";
+      }
+    }), R = t(() => {
+      const p = {};
+      y.value && Object.keys(y.value).forEach((z) => p[`aria-${z}`] = y.value[z]);
+      const s = {
+        "aria-label": Q.value,
+        "aria-disabled": j.value,
+        ...p
       };
       return Object.fromEntries(
-        Object.entries(a).filter(([o, d]) => d != null)
+        Object.entries(s).filter(([N, z]) => z != null)
       );
-    }), i = () => {
+    }), K = () => {
       X("clicked");
     };
-    return (r, a) => e.nbId ? (J(), Q("div", ie({
+    return (p, s) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", L.value],
-      style: [W.value],
+      class: ["nb-wrapper", D.value],
+      style: [P.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, p.value, {
-      onClick: i,
+    }, R.value, {
+      onClick: K,
       onKeydown: [
-        a[0] || (a[0] = Y(z((o) => !B(x) && e.hasTabIndexEnter && i(), ["prevent"]), ["enter"])),
-        a[1] || (a[1] = Y(z((o) => !B(x) && e.hasTabIndexSpace && i(), ["prevent"]), ["space"]))
+        s[0] || (s[0] = O(A((N) => !o(j) && e.hasTabIndexEnter && K(), ["prevent"]), ["enter"])),
+        s[1] || (s[1] = O(A((N) => !o(j) && e.hasTabIndexSpace && K(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: "nb-reset component component-transition",
-        style: M([m.value])
+        class: pe(["nb-reset component component-transition", [x.value]]),
+        style: se([J.value])
       }, [
-        oe(r.$slots, "content", {}, () => [
-          a[2] || (a[2] = re("Default Text"))
+        he(p.$slots, "content", {}, () => [
+          s[2] || (s[2] = Ce("Default Text"))
         ], !0)
-      ], 12, Zt)
-    ], 16, Qt)) : te("", !0);
+      ], 14, Qt)
+    ], 16, Jt)) : ye("", !0);
   }
-}), ta = /* @__PURE__ */ ve(ea, [["__scopeId", "data-v-80478991"]]);
-const aa = ["tabIndex"], oa = ["id"], la = { class: "first-child" }, na = { class: "last-child" }, ua = /* @__PURE__ */ Object.assign({
+}), ea = /* @__PURE__ */ ke(Zt, [["__scopeId", "data-v-055e6db9"]]);
+const ta = ["tabIndex"], aa = ["id"], la = { class: "first-child" }, oa = { class: "last-child" }, na = /* @__PURE__ */ Object.assign({
   name: "NbButtonAlternateText",
   inheritAttrs: !1
 }, {
@@ -1544,8 +1888,8 @@ const aa = ["tabIndex"], oa = ["id"], la = { class: "first-child" }, na = { clas
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -1568,25 +1912,63 @@ const aa = ["tabIndex"], oa = ["id"], la = { class: "first-child" }, na = { clas
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "#ffffff"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    textHoverColor: {
+    // Cores do tema light
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
       type: String,
       default: "#000000"
     },
-    buttonColor: {
+    lightButtonColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightButtonColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightBorderColor: {
+      type: String,
+      default: "#cccccc"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
       type: String,
       default: "#ffffff"
     },
-    buttonHoverColor: {
+    darkButtonColor: {
       type: String,
-      default: "red"
+      default: "#2d2d2d"
     },
-    borderColor: {
+    darkButtonColorHover: {
       type: String,
-      default: "#ffe54c"
+      default: "#3d3d3d"
+    },
+    darkBorderColor: {
+      type: String,
+      default: "#555555"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     showBorder: {
       type: Boolean,
@@ -1633,112 +2015,122 @@ const aa = ["tabIndex"], oa = ["id"], la = { class: "first-child" }, na = { clas
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((o) => ({
-      a3f9134a: $.value,
-      "05495291": g.value,
-      e76cf5ce: p.value,
-      "674b40ec": i.value
+  setup(e, { emit: l }) {
+    xe((M) => ({
+      "5956052a": p.value,
+      da8cae9e: B.value,
+      "283a67f7": h.value,
+      "7248e796": N.value,
+      "235d8174": z.value,
+      "1943f70b": E.value,
+      "07819ee5": n.value,
+      c5fb43aa: H.value,
+      "757e4a6c": i.value,
+      "3fd5a6dc": u.value,
+      ac7c7d52: c.value,
+      "786e2162": r.value,
+      "81b044d4": oe.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      borderColor: A,
-      buttonHoverColor: O,
-      showBorder: N,
-      borderRadius: x,
-      textColor: V,
-      textHoverColor: w,
-      width: I,
-      paddingX: S,
-      paddingY: T,
-      disabled: f,
-      fontFamily: y,
-      fontSize: L,
-      fontWeight: W
-    } = ce(D), m = t(() => {
-      const o = f.value ? "component-disabled" : "", d = j.value !== "b" ? "inline-block" : "block", v = H.value ? H.value : "#ffffff", u = O.value ? O.value : "#000000", n = A.value ? A.value : "#ffe54c", c = !x.value || x.value < 0 ? 0 : x.value, k = [!1, !0].includes(N.value) ? N.value : !0, F = V.value ? V.value : "#ffffff", G = w.value ? w.value : "#000000", le = !I.value || I.value < 86 ? 86 : I.value, ae = !S.value || S.value < 0 ? 1 : S.value, K = !T.value || T.value < 0 ? 0.4 : T.value, ne = y.value ? y.value : "'Lato', sans-serif", de = L.value ? L.value : "1.6em", U = !W.value || W.value < 0 ? 200 : W.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightTextColorHover: te,
+      lightButtonColor: j,
+      lightButtonColorHover: Z,
+      lightBorderColor: F,
+      lightDisabledBgColor: G,
+      darkTextColor: ee,
+      darkTextColorHover: W,
+      darkButtonColor: L,
+      darkButtonColorHover: V,
+      darkBorderColor: I,
+      darkDisabledBgColor: b,
+      showBorder: T,
+      borderRadius: f,
+      width: m,
+      paddingX: d,
+      paddingY: _,
+      disabled: S,
+      fontFamily: D,
+      fontSize: P,
+      fontWeight: J
+    } = Be(ae), w = t(() => {
+      const M = S.value ? "component-disabled" : "", v = q.value !== "b" ? "inline-block" : "block", g = !f.value || f.value < 0 ? 0 : f.value, le = [!1, !0].includes(T.value) ? T.value : !0, $ = !m.value || m.value < 86 ? 86 : m.value, k = !d.value || d.value < 0 ? 1 : d.value, ue = !_.value || _.value < 0 ? 0.4 : _.value, ne = D.value ? D.value : "'Lato', sans-serif", me = P.value ? P.value : "1.6em", ge = !J.value || J.value < 0 ? 200 : J.value;
       return {
-        disabled: o,
-        display: d,
-        buttonColor: v,
-        buttonHoverColor: u,
-        borderColor: n,
-        showBorder: k,
-        borderRadius: c,
-        textColor: F,
-        textHoverColor: G,
-        width: le,
-        paddingX: ae,
-        paddingY: K,
+        disabled: M,
+        display: v,
+        showBorder: le,
+        borderRadius: g,
+        width: $,
+        paddingX: k,
+        paddingY: ue,
         font: ne,
-        fontSize: de,
-        fontWeight: U
+        fontSize: me,
+        fontWeight: ge
       };
-    }), h = t(() => m.value.disabled), R = t(() => ({
-      display: m.value.display
-    })), s = t(() => {
-      const o = m.value, d = o.display === "block" ? "auto" : `${o.width}px`;
+    }), x = t(() => w.value.disabled), R = t(() => ({
+      display: w.value.display
+    })), K = t(() => {
+      const M = w.value, v = M.display === "block" ? "auto" : `${M.width}px`;
       return {
-        ...o.showBorder ? { border: `1px solid ${o.borderColor}` } : {},
-        borderRadius: `${o.borderRadius}rem`,
-        background: o.buttonColor,
+        borderRadius: `${M.borderRadius}rem`,
         minWidth: "33px",
-        width: d,
-        padding: `${o.paddingY}rem ${o.paddingX}rem`,
+        width: v,
+        padding: `${M.paddingY}rem ${M.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: o.fontSize,
-        fontWeight: o.fontWeight
+        fontSize: M.fontSize,
+        fontWeight: M.fontWeight
       };
-    }), $ = t(() => m.value.font), g = t(() => m.value.textColor), p = t(() => m.value.textHoverColor), i = t(() => m.value.buttonHoverColor), r = t(() => {
-      const o = {};
-      C.value && Object.keys(C.value).forEach((u) => o[`aria-${u}`] = C.value[u]);
-      const d = {
-        "aria-label": E.value,
-        "aria-disabled": f.value,
-        ...o
+    }), p = t(() => w.value.font), s = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), N = t(() => U.value), z = t(() => te.value), B = t(() => j.value), E = t(() => Z.value), h = t(() => F.value), r = t(() => G.value), i = t(() => ee.value), u = t(() => W.value), n = t(() => L.value), c = t(() => V.value), H = t(() => I.value), oe = t(() => b.value), ie = t(() => {
+      const M = {};
+      y.value && Object.keys(y.value).forEach((le) => M[`aria-${le}`] = y.value[le]);
+      const v = {
+        "aria-label": Q.value,
+        "aria-disabled": S.value,
+        ...M
       };
       return Object.fromEntries(
-        Object.entries(d).filter(([v, u]) => u != null)
+        Object.entries(v).filter(([g, le]) => le != null)
       );
-    }), a = () => {
+    }), be = () => {
       X("clicked");
     };
-    return (o, d) => e.nbId ? (J(), Q("div", ie({
+    return (M, v) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", h.value],
+      class: ["nb-wrapper", x.value],
       style: [R.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, r.value, {
-      onClick: a,
+    }, ie.value, {
+      onClick: be,
       onKeydown: [
-        d[0] || (d[0] = Y(z((v) => !B(f) && e.hasTabIndexEnter && a(), ["prevent"]), ["enter"])),
-        d[1] || (d[1] = Y(z((v) => !B(f) && e.hasTabIndexSpace && a(), ["prevent"]), ["space"]))
+        v[0] || (v[0] = O(A((g) => !o(S) && e.hasTabIndexEnter && be(), ["prevent"]), ["enter"])),
+        v[1] || (v[1] = O(A((g) => !o(S) && e.hasTabIndexSpace && be(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component"]),
-        style: M([s.value])
+        class: pe(["nb-reset", "component", s.value, { "component--no-border": !o(T) }]),
+        style: se([K.value])
       }, [
-        P("div", la, [
-          oe(o.$slots, "content", {}, () => [
-            d[2] || (d[2] = re("Default Text"))
+        de("div", la, [
+          he(M.$slots, "content", {}, () => [
+            v[2] || (v[2] = Ce("Default Text"))
           ], !0)
         ]),
-        P("div", na, [
-          oe(o.$slots, "content", {}, () => [
-            d[3] || (d[3] = re("Default Text"))
+        de("div", oa, [
+          he(M.$slots, "content", {}, () => [
+            v[3] || (v[3] = Ce("Default Text"))
           ], !0)
         ])
-      ], 12, oa)
-    ], 16, aa)) : te("", !0);
+      ], 14, aa)
+    ], 16, ta)) : ye("", !0);
   }
-}), ra = /* @__PURE__ */ ve(ua, [["__scopeId", "data-v-c9feddef"]]);
-const da = ["tabIndex"], sa = ["id"], ia = /* @__PURE__ */ Object.assign({
+}), ra = /* @__PURE__ */ ke(na, [["__scopeId", "data-v-374312ab"]]);
+const ua = ["tabIndex"], da = ["id"], ia = /* @__PURE__ */ Object.assign({
   name: "NbButtonBack",
   inheritAttrs: !1
 }, {
@@ -1768,13 +2160,39 @@ const da = ["tabIndex"], sa = ["id"], ia = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    color: {
+    theme: {
       type: String,
-      default: "#477e99"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    textColor: {
+    // Cores do tema light
+    lightColor: {
       type: String,
-      default: "#77d2ff"
+      default: "#333333"
+    },
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkTextColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     text: {
       type: String,
@@ -1801,89 +2219,98 @@ const da = ["tabIndex"], sa = ["id"], ia = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((h) => ({
-      "6c47e09f": f.value,
-      "055e9056": T.value,
-      "12af3efc": S.value
-    })), He(() => {
-      W();
+  setup(e, { emit: l }) {
+    xe((x) => ({
+      "0236f7b6": S.value,
+      "2ceb0b8a": m.value,
+      bcfa5292: f.value,
+      "16df2f54": _.value,
+      "1ee30cfa": d.value
+    })), Ee(() => {
+      J();
     });
-    const X = b, D = e, {
-      ariaLabel: j,
-      ariaAttrs: E,
-      color: C,
-      textColor: H,
-      disabled: A,
-      fontFamily: O,
-      fontSize: N,
-      fontWeight: x
-    } = ce(D), V = t(() => {
-      const h = A.value ? "component-disabled" : "", R = C.value ? C.value : "#77d2ff", s = H.value ? H.value : "#6dc1ec", $ = O.value ? O.value : "'Lato', sans-serif", g = N.value ? N.value : "1.6em", p = !x.value || x.value < 0 ? 400 : x.value;
+    const X = l, ae = e, {
+      ariaLabel: q,
+      ariaAttrs: Q,
+      theme: y,
+      lightColor: Y,
+      lightTextColor: U,
+      lightDisabledBgColor: te,
+      darkColor: j,
+      darkTextColor: Z,
+      darkDisabledBgColor: F,
+      disabled: G,
+      fontFamily: ee,
+      fontSize: W,
+      fontWeight: L
+    } = Be(ae), V = t(() => {
+      const x = G.value ? "component-disabled" : "", R = ee.value ? ee.value : "'Lato', sans-serif", K = W.value ? W.value : "1.6em", p = !L.value || L.value < 0 ? 400 : L.value;
       return {
-        color: R,
-        textColor: s,
-        font: $,
-        fontSize: g,
+        font: R,
+        fontSize: K,
         fontWeight: p,
-        disabled: h
+        disabled: x
       };
-    }), w = t(() => ({})), I = t(() => {
-      const h = V.value;
+    }), I = t(() => ({})), b = t(() => {
+      const x = V.value;
       return {
-        fontSize: h.fontSize,
-        fontWeight: h.fontWeight
+        fontSize: x.fontSize,
+        fontWeight: x.fontWeight
       };
-    }), S = t(() => V.value.color), T = t(() => V.value.textColor), f = t(() => V.value.font), y = t(() => V.value.disabled), L = t(() => {
-      const h = {};
-      E.value && Object.keys(E.value).forEach(($) => h[`aria-${$}`] = E.value[$]);
+    }), T = t(() => y.value === "dark" ? "component__theme--dark" : "component__theme--light"), f = t(() => Y.value), m = t(() => U.value);
+    t(() => te.value);
+    const d = t(() => j.value), _ = t(() => Z.value);
+    t(() => F.value);
+    const S = t(() => V.value.font), D = t(() => V.value.disabled), P = t(() => {
+      const x = {};
+      Q.value && Object.keys(Q.value).forEach((p) => x[`aria-${p}`] = Q.value[p]);
       const R = {
-        "aria-label": j.value,
-        "aria-disabled": A.value,
-        ...h
+        "aria-label": q.value,
+        "aria-disabled": G.value,
+        ...x
       };
       return Object.fromEntries(
-        Object.entries(R).filter(([s, $]) => $ != null)
+        Object.entries(R).filter(([K, p]) => p != null)
       );
-    }), W = () => {
-    }, m = () => {
+    }), J = () => {
+    }, w = () => {
       X("clicked");
     };
-    return (h, R) => e.nbId ? (J(), Q("div", ie({
+    return (x, R) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", y.value],
-      style: [w.value],
+      class: ["nb-wrapper", D.value],
+      style: [I.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, L.value, {
-      onClick: m,
+    }, P.value, {
+      onClick: w,
       onKeydown: [
-        R[0] || (R[0] = Y(z((s) => !B(A) && e.hasTabIndexEnter && m(), ["prevent"]), ["enter"])),
-        R[1] || (R[1] = Y(z((s) => !B(A) && e.hasTabIndexSpace && m(), ["prevent"]), ["space"]))
+        R[0] || (R[0] = O(A((K) => !o(G) && e.hasTabIndexEnter && w(), ["prevent"]), ["enter"])),
+        R[1] || (R[1] = O(A((K) => !o(G) && e.hasTabIndexSpace && w(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component"]),
-        style: M([I.value])
+        class: pe(["nb-reset", "component", T.value]),
+        style: se([b.value])
       }, [
-        R[2] || (R[2] = P("svg", {
+        R[2] || (R[2] = de("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "1em",
           height: "1em",
           viewBox: "0 0 16 16"
         }, [
-          P("path", {
+          de("path", {
             d: "M14 8a.75.75 0 01-.75.75H4.56l1.22 1.22a.75.75 0 11-1.06 1.06l-2.5-2.5a.75.75 0 010-1.06l2.5-2.5a.75.75 0 111.06 1.06L4.56 7.25h8.69A.75.75 0 0114 8z",
             "clip-rule": "evenodd"
           })
         ], -1)),
-        P("span", null, Se(e.text), 1)
-      ], 12, sa)
-    ], 16, da)) : te("", !0);
+        de("span", null, We(e.text), 1)
+      ], 14, da)
+    ], 16, ua)) : ye("", !0);
   }
-}), fa = /* @__PURE__ */ ve(ia, [["__scopeId", "data-v-a3d16595"]]);
-const ca = ["tabIndex"], va = ["id"], ba = /* @__PURE__ */ Object.assign({
+}), sa = /* @__PURE__ */ ke(ia, [["__scopeId", "data-v-88b676fd"]]);
+const ca = ["tabIndex"], fa = ["id"], va = /* @__PURE__ */ Object.assign({
   name: "NbButtonGradientBorderToBackground",
   inheritAttrs: !1
 }, {
@@ -1897,8 +2324,8 @@ const ca = ["tabIndex"], va = ["id"], ba = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -1986,107 +2413,107 @@ const ca = ["tabIndex"], va = ["id"], ba = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((u) => ({
-      "91fb25f6": $.value,
-      "2e8b8896": a.value,
-      "0c6b7cbb": i.value,
-      "5367398e": p.value,
-      "13c73054": g.value,
-      c4c5b5a2: r.value,
-      "478b3e46": o.value
+  setup(e, { emit: l }) {
+    xe((s) => ({
+      "91fb25f6": S.value,
+      "2e8b8896": x.value,
+      "0c6b7cbb": J.value,
+      "5367398e": P.value,
+      "13c73054": D.value,
+      c4c5b5a2: w.value,
+      "478b3e46": R.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      borderColor: A,
-      buttonHoverColor: O,
-      showBorder: N,
-      borderRadius: x,
-      textColor: V,
-      textHoverColor: w,
-      width: I,
-      paddingX: S,
-      paddingY: T,
-      disabled: f,
-      fontFamily: y,
-      fontSize: L,
-      fontWeight: W
-    } = ce(D), m = t(() => {
-      const u = f.value ? "component-disabled" : "", n = j.value !== "b" ? "inline-block" : "block", c = H.value ? H.value : "#ffffff", k = O.value ? O.value : "#000000", F = A.value ? A.value : "#ffe54c", G = !x.value || x.value < 0 ? 0 : x.value, le = [!1, !0].includes(N.value) ? N.value : !0, ae = V.value ? V.value : "#ffffff", K = w.value ? w.value : "#000000", ne = !I.value || I.value < 86 ? 86 : I.value, de = !S.value || S.value < 0 ? 1 : S.value, U = !T.value || T.value < 0 ? 0.2 : T.value, be = y.value ? y.value : "'Lato', sans-serif", Z = L.value ? L.value : "1.6em", pe = !W.value || W.value < 0 ? 200 : W.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      buttonColor: Y,
+      borderColor: U,
+      buttonHoverColor: te,
+      showBorder: j,
+      borderRadius: Z,
+      textColor: F,
+      textHoverColor: G,
+      width: ee,
+      paddingX: W,
+      paddingY: L,
+      disabled: V,
+      fontFamily: I,
+      fontSize: b,
+      fontWeight: T
+    } = Be(ae), f = t(() => {
+      const s = V.value ? "component-disabled" : "", N = q.value !== "b" ? "inline-block" : "block", z = Y.value ? Y.value : "#ffffff", B = te.value ? te.value : "#000000", E = U.value ? U.value : "#ffe54c", h = !Z.value || Z.value < 0 ? 0 : Z.value, r = [!1, !0].includes(j.value) ? j.value : !0, i = F.value ? F.value : "#ffffff", u = G.value ? G.value : "#000000", n = !ee.value || ee.value < 86 ? 86 : ee.value, c = !W.value || W.value < 0 ? 1 : W.value, H = !L.value || L.value < 0 ? 0.2 : L.value, oe = I.value ? I.value : "'Lato', sans-serif", ie = b.value ? b.value : "1.6em", be = !T.value || T.value < 0 ? 200 : T.value;
       return {
-        disabled: u,
-        display: n,
-        buttonColor: c,
-        buttonHoverColor: k,
-        borderColor: F,
-        showBorder: le,
-        borderRadius: G,
-        textColor: ae,
-        textHoverColor: K,
-        width: ne,
-        paddingX: de,
-        paddingY: U,
-        font: be,
-        fontSize: Z,
-        fontWeight: pe
+        disabled: s,
+        display: N,
+        buttonColor: z,
+        buttonHoverColor: B,
+        borderColor: E,
+        showBorder: r,
+        borderRadius: h,
+        textColor: i,
+        textHoverColor: u,
+        width: n,
+        paddingX: c,
+        paddingY: H,
+        font: oe,
+        fontSize: ie,
+        fontWeight: be
       };
-    }), h = t(() => m.value.disabled), R = t(() => ({
-      display: m.value.display
-    })), s = t(() => {
-      const u = m.value;
+    }), m = t(() => f.value.disabled), d = t(() => ({
+      display: f.value.display
+    })), _ = t(() => {
+      const s = f.value;
       return {
         minWidth: "33px",
-        width: u.display === "block" ? "auto" : `${u.width}px`,
+        width: s.display === "block" ? "auto" : `${s.width}px`,
         lineHeight: "1.42857143",
-        fontSize: u.fontSize,
-        fontWeight: u.fontWeight
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight
       };
-    }), $ = t(() => m.value.font), g = t(() => {
-      const u = m.value;
-      return `${u.paddingY}rem ${u.paddingX}rem`;
-    }), p = t(() => `${m.value.borderRadius}rem`), i = t(() => m.value.textColor), r = t(() => m.value.textHoverColor), a = t(() => m.value.buttonColor), o = t(() => m.value.buttonHoverColor), d = t(() => {
-      const u = {};
-      C.value && Object.keys(C.value).forEach((k) => u[`aria-${k}`] = C.value[k]);
-      const n = {
-        "aria-label": E.value,
-        "aria-disabled": f.value,
-        ...u
+    }), S = t(() => f.value.font), D = t(() => {
+      const s = f.value;
+      return `${s.paddingY}rem ${s.paddingX}rem`;
+    }), P = t(() => `${f.value.borderRadius}rem`), J = t(() => f.value.textColor), w = t(() => f.value.textHoverColor), x = t(() => f.value.buttonColor), R = t(() => f.value.buttonHoverColor), K = t(() => {
+      const s = {};
+      y.value && Object.keys(y.value).forEach((B) => s[`aria-${B}`] = y.value[B]);
+      const N = {
+        "aria-label": Q.value,
+        "aria-disabled": V.value,
+        ...s
       };
       return Object.fromEntries(
-        Object.entries(n).filter(([c, k]) => k != null)
+        Object.entries(N).filter(([z, B]) => B != null)
       );
-    }), v = () => {
+    }), p = () => {
       X("clicked");
     };
-    return (u, n) => e.nbId ? (J(), Q("div", ie({
+    return (s, N) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", h.value],
-      style: [R.value],
+      class: ["nb-wrapper", m.value],
+      style: [d.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, d.value, {
-      onClick: v,
+    }, K.value, {
+      onClick: p,
       onKeydown: [
-        n[0] || (n[0] = Y(z((c) => !B(f) && e.hasTabIndexEnter && v(), ["prevent"]), ["enter"])),
-        n[1] || (n[1] = Y(z((c) => !B(f) && e.hasTabIndexSpace && v(), ["prevent"]), ["space"]))
+        N[0] || (N[0] = O(A((z) => !o(V) && e.hasTabIndexEnter && p(), ["prevent"]), ["enter"])),
+        N[1] || (N[1] = O(A((z) => !o(V) && e.hasTabIndexSpace && p(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
         class: "nb-reset component",
-        style: M([s.value])
+        style: se([_.value])
       }, [
-        oe(u.$slots, "content", {}, () => [
-          n[2] || (n[2] = re("Default Text"))
+        he(s.$slots, "content", {}, () => [
+          N[2] || (N[2] = Ce("Default Text"))
         ], !0)
-      ], 12, va)
-    ], 16, ca)) : te("", !0);
+      ], 12, fa)
+    ], 16, ca)) : ye("", !0);
   }
-}), pa = /* @__PURE__ */ ve(ba, [["__scopeId", "data-v-38279483"]]);
-const ya = ["tabIndex"], ma = ["id"], ga = /* @__PURE__ */ Object.assign({
+}), pa = /* @__PURE__ */ ke(va, [["__scopeId", "data-v-38279483"]]);
+const ba = ["tabIndex"], ga = ["id"], ya = /* @__PURE__ */ Object.assign({
   name: "NbButtonNormal",
   inheritAttrs: !1
 }, {
@@ -2100,8 +2527,8 @@ const ya = ["tabIndex"], ma = ["id"], ga = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -2124,26 +2551,6 @@ const ya = ["tabIndex"], ma = ["id"], ga = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    textHoverColor: {
-      type: String,
-      default: "blue"
-    },
-    buttonColor: {
-      type: String,
-      default: "tomato"
-    },
-    buttonHoverColor: {
-      type: String,
-      default: "green"
-    },
-    borderColor: {
-      type: String,
-      default: "#ffe54c"
-    },
     showBorder: {
       type: Boolean,
       default: !0,
@@ -2200,118 +2607,203 @@ const ya = ["tabIndex"], ma = ["id"], ga = /* @__PURE__ */ Object.assign({
       default: "s",
       // ms, s, etc.
       validator: (e) => ["ms", "s"].indexOf(e) !== -1
+    },
+    theme: {
+      type: String,
+      default: "light",
+      validator: (e) => ["dark", "light"].indexOf(e) !== -1
+    },
+    // Cores do tema light
+    lightButtonColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightButtonColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
+      type: String,
+      default: "#000000"
+    },
+    lightBorderColor: {
+      type: String,
+      default: "#cccccc"
+    },
+    lightBorderColorHover: {
+      type: String,
+      default: "#bbbbbb"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkBorderColor: {
+      type: String,
+      default: "#555555"
+    },
+    darkBorderColorHover: {
+      type: String,
+      default: "#666666"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((c) => ({
-      "2e22e435": i.value,
-      "5584b7eb": r.value,
-      d37a9074: o.value,
-      "50d6b58e": v.value,
-      "1bf967ff": a.value,
-      c03be5d4: d.value
+  setup(e, { emit: l }) {
+    xe((n) => ({
+      "7269af92": E.value,
+      "6d2ea056": h.value,
+      "663bbb7d": o(w),
+      "55471ed8": o(P),
+      "2a7043c4": o(R),
+      "3a59c3bf": o(x),
+      f5857d78: o(J),
+      "7661c484": o(K),
+      "1eabc57a": o(m),
+      "04b7b1c4": o(T),
+      d9b63338: o(_),
+      "46c0e48e": o(d),
+      a58f1684: o(f),
+      "266b5d90": o(S),
+      a513a7ee: o(p),
+      "53e9a14f": o(D)
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      borderColor: A,
-      buttonHoverColor: O,
-      showBorder: N,
-      borderRadius: x,
-      textColor: V,
-      textHoverColor: w,
-      width: I,
-      paddingX: S,
-      paddingY: T,
-      disabled: f,
-      fontFamily: y,
-      fontSize: L,
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      showBorder: Y,
+      borderRadius: U,
+      width: te,
+      paddingX: j,
+      paddingY: Z,
+      disabled: F,
+      fontFamily: G,
+      fontSize: ee,
       fontWeight: W,
-      hasAnimation: m,
-      animationDuration: h,
-      animationDurationType: R
-    } = ce(D), s = t(() => {
-      const c = f.value ? "component-disabled" : "", k = j.value !== "b" ? "inline-block" : "block", F = H.value ? H.value : "#ffffff", G = O.value ? O.value : "#000000", le = A.value ? A.value : "#ffe54c", ae = !x.value || x.value < 0 ? 0 : x.value, K = [!1, !0].includes(N.value) ? N.value : !0, ne = V.value ? V.value : "#ffffff", de = w.value ? w.value : "#000000", U = !I.value || I.value < 86 ? 86 : I.value, be = !S.value || S.value < 0 ? 1 : S.value, Z = !T.value || T.value < 0 ? 0.2 : T.value, pe = y.value ? y.value : "'Lato', sans-serif", se = L.value ? L.value : "1.6em", ge = !W.value || W.value < 0 ? 200 : W.value, he = m.value ? "component-transition" : "", Be = !h.value || h.value < 0 ? 0.3 : h.value, we = !R.value || R.value < 0 ? "ms" : R.value;
+      hasAnimation: L,
+      animationDuration: V,
+      animationDurationType: I,
+      theme: b,
+      lightButtonColor: T,
+      lightButtonColorHover: f,
+      lightTextColor: m,
+      lightTextColorHover: d,
+      lightBorderColor: _,
+      lightBorderColorHover: S,
+      lightDisabledBgColor: D,
+      darkButtonColor: P,
+      darkButtonColorHover: J,
+      darkTextColor: w,
+      darkTextColorHover: x,
+      darkBorderColor: R,
+      darkBorderColorHover: K,
+      darkDisabledBgColor: p
+    } = Be(ae), s = t(() => {
+      const n = F.value ? "component-disabled" : "", c = q.value !== "b" ? "inline-block" : "block", H = !U.value || U.value < 0 ? 0 : U.value, oe = [!1, !0].includes(Y.value) ? Y.value : !0, ie = !te.value || te.value < 86 ? 86 : te.value, be = !j.value || j.value < 0 ? 1 : j.value, M = !Z.value || Z.value < 0 ? 0.2 : Z.value, v = G.value ? G.value : "'Lato', sans-serif", g = ee.value ? ee.value : "1.6em", le = !W.value || W.value < 0 ? 200 : W.value, $ = L.value ? "component-transition" : "", k = !V.value || V.value < 0 ? 0.3 : V.value, ue = !I.value || I.value < 0 ? "ms" : I.value, ne = b.value ? b.value : "light";
       return {
-        disabled: c,
-        display: k,
-        buttonColor: F,
-        buttonHoverColor: G,
-        borderColor: le,
-        showBorder: K,
-        borderRadius: ae,
-        textColor: ne,
-        textHoverColor: de,
-        width: U,
+        disabled: n,
+        display: c,
+        showBorder: oe,
+        borderRadius: H,
+        width: ie,
         paddingX: be,
-        paddingY: Z,
-        font: pe,
-        fontSize: se,
-        fontWeight: ge,
-        hasAnimation: he,
-        animationDuration: Be,
-        animationDurationType: we
+        paddingY: M,
+        font: v,
+        fontSize: g,
+        fontWeight: le,
+        hasAnimation: $,
+        animationDuration: k,
+        animationDurationType: ue,
+        theme: ne
       };
-    }), $ = t(() => s.value.disabled), g = t(() => ({
+    }), N = t(() => s.value.disabled), z = t(() => ({
       display: s.value.display
-    })), p = t(() => {
-      const c = s.value, k = c.display === "block" ? "auto" : `${c.width}px`;
+    })), B = t(() => {
+      const n = s.value, c = n.display === "block" ? "auto" : `${n.width}px`;
       return {
-        ...c.showBorder ? { border: `1px solid ${c.borderColor}` } : {},
-        borderRadius: `${c.borderRadius}rem`,
+        borderRadius: `${n.borderRadius}rem`,
         minWidth: "33px",
-        width: k,
-        padding: `${c.paddingY}rem ${c.paddingX}rem`,
+        width: c,
+        padding: `${n.paddingY}rem ${n.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: c.fontSize,
-        fontWeight: c.fontWeight
+        fontSize: n.fontSize,
+        fontWeight: n.fontWeight
       };
-    }), i = t(() => s.value.font), r = t(() => s.value.textColor), a = t(() => s.value.textHoverColor), o = t(() => s.value.buttonColor), d = t(() => s.value.buttonHoverColor), v = t(() => {
-      const c = s.value;
-      return c.hasAnimation ? `all ${c.animationDuration}${c.animationDurationType} ease-in-out` : "";
-    }), u = t(() => {
-      const c = {};
-      C.value && Object.keys(C.value).forEach((G) => c[`aria-${G}`] = C.value[G]);
-      const k = {
-        "aria-label": E.value,
-        "aria-disabled": f.value,
-        ...c
+    }), E = t(() => s.value.font), h = t(() => {
+      const n = s.value;
+      return n.hasAnimation ? `all ${n.animationDuration}${n.animationDurationType} ease-in-out` : "";
+    }), r = t(() => {
+      switch (s.value.theme) {
+        case "dark":
+          return "component__theme--dark";
+        default:
+          return "component__theme--light";
+      }
+    }), i = t(() => {
+      const n = {};
+      y.value && Object.keys(y.value).forEach((oe) => n[`aria-${oe}`] = y.value[oe]);
+      const c = {
+        "aria-label": Q.value,
+        "aria-disabled": F.value,
+        ...n
       };
       return Object.fromEntries(
-        Object.entries(k).filter(([F, G]) => G != null)
+        Object.entries(c).filter(([H, oe]) => oe != null)
       );
-    }), n = () => {
+    }), u = () => {
       X("clicked");
     };
-    return (c, k) => e.nbId ? (J(), Q("div", ie({
+    return (n, c) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", $.value],
-      style: [g.value],
+      class: ["nb-wrapper", N.value],
+      style: [z.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, u.value, {
-      onClick: n,
+    }, i.value, {
+      onClick: u,
       onKeydown: [
-        k[0] || (k[0] = Y(z((F) => !B(f) && e.hasTabIndexEnter && n(), ["prevent"]), ["enter"])),
-        k[1] || (k[1] = Y(z((F) => !B(f) && e.hasTabIndexSpace && n(), ["prevent"]), ["space"]))
+        c[0] || (c[0] = O(A((H) => !o(F) && e.hasTabIndexEnter && u(), ["prevent"]), ["enter"])),
+        c[1] || (c[1] = O(A((H) => !o(F) && e.hasTabIndexSpace && u(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset component", { "component-transition": B(m) }]),
-        style: M([p.value])
+        class: pe(["nb-reset component", [{ "component-transition": o(L), "component--no-border": !o(Y) }, r.value]]),
+        style: se([B.value])
       }, [
-        oe(c.$slots, "content", {}, () => [
-          k[2] || (k[2] = re("Default Text"))
+        he(n.$slots, "content", {}, () => [
+          c[2] || (c[2] = Ce("Default Text"))
         ], !0)
-      ], 14, ma)
-    ], 16, ya)) : te("", !0);
+      ], 14, ga)
+    ], 16, ba)) : ye("", !0);
   }
-}), xa = /* @__PURE__ */ ve(ga, [["__scopeId", "data-v-1e13b914"]]);
-const Va = ["tabIndex"], Ca = ["id"], Sa = /* @__PURE__ */ Object.assign({
+}), ma = /* @__PURE__ */ ke(ya, [["__scopeId", "data-v-df95b133"]]);
+const ha = ["tabIndex"], Ca = ["id"], Sa = /* @__PURE__ */ Object.assign({
   name: "NbButtonShadow",
   inheritAttrs: !1
 }, {
@@ -2325,8 +2817,8 @@ const Va = ["tabIndex"], Ca = ["id"], Sa = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -2349,29 +2841,71 @@ const Va = ["tabIndex"], Ca = ["id"], Sa = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
+      type: String,
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
+    },
+    // Cores do tema light
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
       type: String,
       default: "#000000"
     },
-    textHoverColor: {
+    lightButtonColor: {
       type: String,
-      default: "tomato"
+      default: "#f5f5f5"
     },
-    buttonColor: {
+    lightButtonColorHover: {
       type: String,
-      default: "#faf77d"
+      default: "#e0e0e0"
     },
-    buttonHoverColor: {
+    lightButtonShadowColor: {
+      type: String,
+      default: "#cccccc"
+    },
+    lightBorderColor: {
       type: String,
-      default: "#faf77d"
+      default: "#cccccc"
     },
-    buttonShadowColor: {
+    lightDisabledBgColor: {
       type: String,
-      default: "#01d7b0"
+      default: "#dfdfd9"
     },
-    borderColor: {
+    // Cores do tema dark
+    darkTextColor: {
       type: String,
-      default: "#191a1b"
+      default: "#ffffff"
+    },
+    darkTextColorHover: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkButtonShadowColor: {
+      type: String,
+      default: "#555555"
+    },
+    darkBorderColor: {
+      type: String,
+      default: "#555555"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     borderRadius: {
       type: Number,
@@ -2413,113 +2947,119 @@ const Va = ["tabIndex"], Ca = ["id"], Sa = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((u) => ({
-      "7864c805": $.value,
-      ff8538d4: i.value,
-      "46d817bb": g.value,
-      bd8907d4: a.value,
-      "11ca4346": r.value,
-      f44d2ba2: p.value,
-      a3710a74: o.value
+  setup(e, { emit: l }) {
+    xe((k) => ({
+      "25941b92": s.value,
+      "6279d744": E.value,
+      "43599ee9": z.value,
+      "100ad2ec": u.value,
+      "4791f544": r.value,
+      c96e2750: h.value,
+      "1bbd23d3": B.value,
+      "56938e58": i.value,
+      "5887d1f2": oe.value,
+      "58626d17": c.value,
+      "23eedd90": v.value,
+      eb8e951c: be.value,
+      "29d26e6a": ie.value,
+      "7ef7fb36": H.value,
+      "86b88a2c": M.value,
+      "0f026316": n.value,
+      "26d87bba": g.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      borderColor: A,
-      buttonHoverColor: O,
-      buttonShadowColor: N,
-      borderRadius: x,
-      textColor: V,
-      textHoverColor: w,
-      width: I,
-      paddingX: S,
-      paddingY: T,
-      disabled: f,
-      fontFamily: y,
-      fontSize: L,
-      fontWeight: W
-    } = ce(D), m = t(() => {
-      const u = f.value ? "component-disabled" : "", n = j.value !== "b" ? "inline-block" : "block", c = H.value ? H.value : "#ffffff", k = O.value ? O.value : "#000000", F = N.value ? N.value : "#01d7b0", G = A.value ? A.value : "#ffe54c", le = !x.value || x.value < 0 ? 0 : x.value, ae = V.value ? V.value : "#ffffff", K = w.value ? w.value : "#000000", ne = !I.value || I.value < 86 ? 86 : I.value, de = !S.value || S.value < 0 ? 1 : S.value, U = !T.value || T.value < 0 ? 0.2 : T.value, be = y.value ? y.value : "'Lato', sans-serif", Z = L.value ? L.value : "1.6em", pe = !W.value || W.value < 0 ? 200 : W.value;
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightTextColorHover: te,
+      lightButtonColor: j,
+      lightButtonColorHover: Z,
+      lightButtonShadowColor: F,
+      lightBorderColor: G,
+      lightDisabledBgColor: ee,
+      darkTextColor: W,
+      darkTextColorHover: L,
+      darkButtonColor: V,
+      darkButtonColorHover: I,
+      darkButtonShadowColor: b,
+      darkBorderColor: T,
+      darkDisabledBgColor: f,
+      borderRadius: m,
+      width: d,
+      paddingX: _,
+      paddingY: S,
+      disabled: D,
+      fontFamily: P,
+      fontSize: J,
+      fontWeight: w
+    } = Be(ae), x = t(() => {
+      const k = D.value ? "component-disabled" : "", ue = q.value !== "b" ? "inline-block" : "block", ne = !m.value || m.value < 0 ? 0 : m.value, me = !d.value || d.value < 86 ? 86 : d.value, ge = !_.value || _.value < 0 ? 1 : _.value, Ie = !S.value || S.value < 0 ? 0.2 : S.value, _e = P.value ? P.value : "'Lato', sans-serif", De = J.value ? J.value : "1.6em", Ne = !w.value || w.value < 0 ? 200 : w.value;
       return {
-        disabled: u,
-        display: n,
-        buttonColor: c,
-        buttonHoverColor: k,
-        buttonShadowColor: F,
-        borderColor: G,
-        borderRadius: le,
-        textColor: ae,
-        textHoverColor: K,
-        width: ne,
-        paddingX: de,
-        paddingY: U,
-        font: be,
-        fontSize: Z,
-        fontWeight: pe
+        disabled: k,
+        display: ue,
+        borderRadius: ne,
+        width: me,
+        paddingX: ge,
+        paddingY: Ie,
+        font: _e,
+        fontSize: De,
+        fontWeight: Ne
       };
-    }), h = t(() => m.value.disabled), R = t(() => ({
-      display: m.value.display
-    })), s = t(() => {
-      const u = m.value, n = u.display === "block" ? "auto" : `${u.width}px`;
+    }), R = t(() => x.value.disabled), K = t(() => ({
+      display: x.value.display
+    })), p = t(() => {
+      const k = x.value, ue = k.display === "block" ? "auto" : `${k.width}px`;
       return {
-        border: `2px solid ${u.borderColor}`,
-        borderRadius: `${u.borderRadius}rem`,
+        borderRadius: `${k.borderRadius}rem`,
         minWidth: "33px",
-        width: n,
-        padding: `${u.paddingY}rem ${u.paddingX}rem`,
+        width: ue,
+        padding: `${k.paddingY}rem ${k.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: u.fontSize,
-        fontWeight: u.fontWeight
+        fontSize: k.fontSize,
+        fontWeight: k.fontWeight
       };
-    }), $ = t(() => m.value.font), g = t(() => m.value.textColor), p = t(() => m.value.textHoverColor), i = t(() => m.value.buttonColor), r = t(() => m.value.buttonHoverColor), a = t(() => {
-      const u = m.value;
-      return `3px 3px 0 -1px ${u.buttonShadowColor}, 3px 3px 0 ${u.buttonShadowColor}`;
-    }), o = t(() => {
-      const u = m.value;
-      return `0 0 0 -1px ${u.buttonShadowColor}, 0 0 0 ${u.buttonShadowColor};`;
-    }), d = t(() => {
-      const u = {};
-      C.value && Object.keys(C.value).forEach((k) => u[`aria-${k}`] = C.value[k]);
-      const n = {
-        "aria-label": E.value,
-        "aria-disabled": f.value,
-        ...u
+    }), s = t(() => x.value.font), N = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), z = t(() => U.value), B = t(() => te.value), E = t(() => j.value), h = t(() => Z.value), r = t(() => `3px 3px 0 -1px ${F.value}, 3px 3px 0 ${F.value}`), i = t(() => `0 0 0 -1px ${F.value}, 0 0 0 ${F.value}`), u = t(() => G.value), n = t(() => ee.value), c = t(() => W.value), H = t(() => L.value), oe = t(() => V.value), ie = t(() => I.value), be = t(() => `3px 3px 0 -1px ${b.value}, 3px 3px 0 ${b.value}`), M = t(() => `0 0 0 -1px ${b.value}, 0 0 0 ${b.value}`), v = t(() => T.value), g = t(() => f.value), le = t(() => {
+      const k = {};
+      y.value && Object.keys(y.value).forEach((me) => k[`aria-${me}`] = y.value[me]);
+      const ue = {
+        "aria-label": Q.value,
+        "aria-disabled": D.value,
+        ...k
       };
       return Object.fromEntries(
-        Object.entries(n).filter(([c, k]) => k != null)
+        Object.entries(ue).filter(([ne, me]) => me != null)
       );
-    }), v = () => {
+    }), $ = () => {
       X("clicked");
     };
-    return (u, n) => e.nbId ? (J(), Q("div", ie({
+    return (k, ue) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", h.value],
-      style: [R.value],
+      class: ["nb-wrapper", R.value],
+      style: [K.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, d.value, {
-      onClick: v,
+    }, le.value, {
+      onClick: $,
       onKeydown: [
-        n[0] || (n[0] = Y(z((c) => !B(f) && e.hasTabIndexEnter && v(), ["prevent"]), ["enter"])),
-        n[1] || (n[1] = Y(z((c) => !B(f) && e.hasTabIndexSpace && v(), ["prevent"]), ["space"]))
+        ue[0] || (ue[0] = O(A((ne) => !o(D) && e.hasTabIndexEnter && $(), ["prevent"]), ["enter"])),
+        ue[1] || (ue[1] = O(A((ne) => !o(D) && e.hasTabIndexSpace && $(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: "nb-reset component",
-        style: M([s.value])
+        class: pe(["nb-reset component", [N.value]]),
+        style: se([p.value])
       }, [
-        oe(u.$slots, "content", {}, () => [
-          n[2] || (n[2] = re("Default Text"))
+        he(k.$slots, "content", {}, () => [
+          ue[2] || (ue[2] = Ce("Default Text"))
         ], !0)
-      ], 12, Ca)
-    ], 16, Va)) : te("", !0);
+      ], 14, Ca)
+    ], 16, ha)) : ye("", !0);
   }
-}), ha = /* @__PURE__ */ ve(Sa, [["__scopeId", "data-v-2fd5dcfb"]]);
-const Ba = ["tabIndex"], wa = ["id"], Ia = /* @__PURE__ */ Object.assign({
+}), xa = /* @__PURE__ */ ke(Sa, [["__scopeId", "data-v-4552bf5e"]]);
+const Ba = ["tabIndex"], ka = ["id"], Va = /* @__PURE__ */ Object.assign({
   name: "NbButtonUnderlineExpand",
   inheritAttrs: !1
 }, {
@@ -2533,8 +3073,8 @@ const Ba = ["tabIndex"], wa = ["id"], Ia = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -2557,21 +3097,55 @@ const Ba = ["tabIndex"], wa = ["id"], Ia = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "rgb(0, 105, 255)"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    textHoverColor: {
+    // Cores do tema light
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
+      type: String,
+      default: "#000000"
+    },
+    lightBorderColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightBorderColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
       type: String,
       default: "#ffffff"
     },
-    borderColor: {
+    darkBorderColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkBorderColorHover: {
       type: String,
-      default: "rgb(0, 105, 255)"
+      default: "#3d3d3d"
     },
-    borderHoverColor: {
+    darkDisabledBgColor: {
       type: String,
-      default: "rgb(20, 51, 214)"
+      default: "rgba(40, 42, 54, 1)"
     },
     borderHeight: {
       type: Number,
@@ -2619,106 +3193,117 @@ const Ba = ["tabIndex"], wa = ["id"], Ia = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((d) => ({
-      "0a4f3d6f": s.value,
-      "28a650a5": $.value,
-      "863c6d74": p.value,
-      "315d98b8": r.value,
-      "990798f6": g.value,
-      "6467f784": i.value
+  setup(e, { emit: l }) {
+    xe((c) => ({
+      c721e4a2: R.value,
+      aa546938: i.value,
+      "39c72471": p.value,
+      "091cda12": N.value,
+      "03e4596a": s.value,
+      "6bbd7a4a": z.value,
+      "9a2bd2e2": B.value,
+      "756886a0": h.value,
+      "122383ed": E.value,
+      "5daceb28": r.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      borderColor: H,
-      borderHoverColor: A,
-      borderHeight: O,
-      textColor: N,
-      textHoverColor: x,
-      width: V,
-      paddingX: w,
-      paddingY: I,
-      disabled: S,
-      fontFamily: T,
-      fontSize: f,
-      fontWeight: y,
-      textAlign: L
-    } = ce(D), W = t(() => {
-      const d = S.value ? "component-disabled" : "", v = j.value !== "b" ? "inline-block" : "block", u = H.value ? H.value : "#ffffff", n = A.value ? A.value : "#000000", c = O.value ? O.value : 1.5, k = N.value ? N.value : "#ffffff", F = x.value ? x.value : "#000000", G = !V.value || V.value < 86 ? 86 : V.value, le = !w.value || w.value < 0 ? 1 : w.value, ae = !I.value || I.value < 0 ? 0.2 : I.value, K = T.value ? T.value : "'Lato', sans-serif", ne = f.value ? f.value : "1.6em", de = !y.value || y.value < 0 ? 200 : y.value, U = L.value ? L.value : "center";
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightTextColorHover: te,
+      lightBorderColor: j,
+      lightBorderColorHover: Z,
+      lightDisabledBgColor: F,
+      darkTextColor: G,
+      darkTextColorHover: ee,
+      darkBorderColor: W,
+      darkBorderColorHover: L,
+      darkDisabledBgColor: V,
+      borderHeight: I,
+      width: b,
+      paddingX: T,
+      paddingY: f,
+      disabled: m,
+      fontFamily: d,
+      fontSize: _,
+      fontWeight: S,
+      textAlign: D
+    } = Be(ae), P = t(() => {
+      const c = m.value ? "component-disabled" : "", H = q.value !== "b" ? "inline-block" : "block", oe = I.value ? I.value : 1.5, ie = !b.value || b.value < 86 ? 86 : b.value, be = !T.value || T.value < 0 ? 1 : T.value, M = !f.value || f.value < 0 ? 0.2 : f.value, v = d.value ? d.value : "'Lato', sans-serif", g = _.value ? _.value : "1.6em", le = !S.value || S.value < 0 ? 200 : S.value, $ = D.value ? D.value : "center";
       return {
-        disabled: d,
-        display: v,
-        borderColor: u,
-        borderHoverColor: n,
-        borderHeight: c,
-        textColor: k,
-        textHoverColor: F,
-        width: G,
-        paddingX: le,
-        paddingY: ae,
-        font: K,
-        fontSize: ne,
-        fontWeight: de,
-        textAlign: U
+        disabled: c,
+        display: H,
+        borderHeight: oe,
+        width: ie,
+        paddingX: be,
+        paddingY: M,
+        font: v,
+        fontSize: g,
+        fontWeight: le,
+        textAlign: $
       };
-    }), m = t(() => W.value.disabled), h = t(() => {
-      const d = W.value;
+    }), J = t(() => P.value.disabled), w = t(() => {
+      const c = P.value;
       return {
-        display: d.display,
-        textAlign: d.textAlign
+        display: c.display,
+        textAlign: c.textAlign
       };
-    }), R = t(() => {
-      const d = W.value;
+    }), x = t(() => {
+      const c = P.value;
       return {
         minWidth: "33px",
-        width: d.display === "block" ? "auto" : `${d.width}px`,
-        padding: `${d.paddingY}rem ${d.paddingX}rem`,
+        width: c.display === "block" ? "auto" : `${c.width}px`,
+        padding: `${c.paddingY}rem ${c.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: d.fontSize,
-        fontWeight: d.fontWeight
+        fontSize: c.fontSize,
+        fontWeight: c.fontWeight
       };
-    }), s = t(() => W.value.font), $ = t(() => W.value.textColor), g = t(() => W.value.textHoverColor), p = t(() => W.value.borderColor), i = t(() => W.value.borderHoverColor), r = t(() => `${W.value.borderHeight}px`), a = t(() => {
-      const d = {};
-      C.value && Object.keys(C.value).forEach((n) => d[`aria-${n}`] = C.value[n]);
-      const v = {
-        "aria-label": E.value,
-        "aria-disabled": S.value,
-        ...d
+    }), R = t(() => P.value.font), K = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), p = t(() => U.value), s = t(() => te.value), N = t(() => j.value), z = t(() => Z.value);
+    t(() => F.value);
+    const B = t(() => G.value), E = t(() => ee.value), h = t(() => W.value), r = t(() => L.value);
+    t(() => V.value);
+    const i = t(() => `${P.value.borderHeight}px`), u = t(() => {
+      const c = {};
+      y.value && Object.keys(y.value).forEach((ie) => c[`aria-${ie}`] = y.value[ie]);
+      const H = {
+        "aria-label": Q.value,
+        "aria-disabled": m.value,
+        ...c
       };
       return Object.fromEntries(
-        Object.entries(v).filter(([u, n]) => n != null)
+        Object.entries(H).filter(([oe, ie]) => ie != null)
       );
-    }), o = () => {
+    }), n = () => {
       X("clicked");
     };
-    return (d, v) => e.nbId ? (J(), Q("div", ie({
+    return (c, H) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", m.value],
-      style: [h.value],
+      class: ["nb-wrapper", J.value],
+      style: [w.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, a.value, {
-      onClick: o,
+    }, u.value, {
+      onClick: n,
       onKeydown: [
-        v[0] || (v[0] = Y(z((u) => !B(S) && e.hasTabIndexEnter && o(), ["prevent"]), ["enter"])),
-        v[1] || (v[1] = Y(z((u) => !B(S) && e.hasTabIndexSpace && o(), ["prevent"]), ["space"]))
+        H[0] || (H[0] = O(A((oe) => !o(m) && e.hasTabIndexEnter && n(), ["prevent"]), ["enter"])),
+        H[1] || (H[1] = O(A((oe) => !o(m) && e.hasTabIndexSpace && n(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: "nb-reset component",
-        style: M([R.value])
+        class: pe(["nb-reset component", [K.value]]),
+        style: se([x.value])
       }, [
-        oe(d.$slots, "content", {}, () => [
-          v[2] || (v[2] = re("Default Text"))
+        he(c.$slots, "content", {}, () => [
+          H[2] || (H[2] = Ce("Default Text"))
         ], !0)
-      ], 12, wa)
-    ], 16, Ba)) : te("", !0);
+      ], 14, ka)
+    ], 16, Ba)) : ye("", !0);
   }
-}), $a = /* @__PURE__ */ ve(Ia, [["__scopeId", "data-v-2ad5fc4a"]]);
-const Na = ["tabIndex"], Ha = ["id"], Aa = /* @__PURE__ */ Object.assign({
+}), Ta = /* @__PURE__ */ ke(Va, [["__scopeId", "data-v-e53b9a58"]]);
+const wa = ["tabIndex"], $a = ["id"], Ia = /* @__PURE__ */ Object.assign({
   name: "NbButtonUnderlineFill",
   inheritAttrs: !1
 }, {
@@ -2732,8 +3317,8 @@ const Na = ["tabIndex"], Ha = ["id"], Aa = /* @__PURE__ */ Object.assign({
       type: String,
       default: "b",
       validator: (e = "b") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     tabIndex: {
@@ -2756,25 +3341,55 @@ const Na = ["tabIndex"], Ha = ["id"], Aa = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => ({})
     },
-    textColor: {
+    theme: {
       type: String,
-      default: "rgb(0, 105, 255)"
+      default: "light",
+      validator: (e) => {
+        const l = e ? e.toLowerCase() : "";
+        return ["light", "dark"].includes(l);
+      }
     },
-    textHoverColor: {
+    // Cores do tema light
+    lightButtonColor: {
       type: String,
-      default: "#ffffff"
+      default: "#f5f5f5"
     },
-    buttonColor: {
+    lightButtonColorHover: {
       type: String,
-      default: "rgb(0, 105, 255)"
+      default: "#e0e0e0"
     },
-    buttonHoverColor: {
+    lightTextColor: {
       type: String,
-      default: "rgb(20, 51, 214)"
+      default: "#333333"
     },
-    borderColor: {
+    lightTextColorHover: {
       type: String,
-      default: "#ffe54c"
+      default: "#000000"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     },
     width: {
       type: Number,
@@ -2817,113 +3432,118 @@ const Na = ["tabIndex"], Ha = ["id"], Aa = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["clicked"],
-  setup(e, { emit: b }) {
-    fe((a) => ({
-      "1b13bb01": R.value,
-      "330bbc92": g.value,
-      abbf0092: s.value,
-      "6f8fb06c": p.value,
-      "60be9fb3": $.value
+  setup(e, { emit: l }) {
+    xe((u) => ({
+      a55578d4: x.value,
+      "1ee98fc5": s.value,
+      "3daf83aa": K.value,
+      "240d5c77": N.value,
+      ae65e09c: p.value,
+      ae22f55e: E.value,
+      89672794: z.value,
+      "3ebffe6b": h.value,
+      "1fe79ea6": B.value
     }));
-    const X = b, D = e, {
-      display: j,
-      ariaLabel: E,
-      ariaAttrs: C,
-      buttonColor: H,
-      buttonHoverColor: A,
-      textColor: O,
-      textHoverColor: N,
-      width: x,
-      paddingX: V,
-      paddingY: w,
-      disabled: I,
-      fontFamily: S,
-      fontSize: T,
-      fontWeight: f,
-      textAlign: y
-    } = ce(D), L = t(() => {
-      const a = I.value ? "component-disabled" : "", o = j.value !== "b" ? "inline-block" : "block", d = H.value ? H.value : "#ffffff", v = A.value ? A.value : "#000000", u = O.value ? O.value : "#ffffff", n = N.value ? N.value : "#000000", c = !x.value || x.value < 86 ? 86 : x.value, k = !V.value || V.value < 0 ? 1 : V.value, F = !w.value || w.value < 0 ? 0.2 : w.value, G = S.value ? S.value : "'Lato', sans-serif", le = T.value ? T.value : "1.6em", ae = !f.value || f.value < 0 ? 200 : f.value, K = y.value ? y.value : "center";
+    const X = l, ae = e, {
+      display: q,
+      ariaLabel: Q,
+      ariaAttrs: y,
+      theme: Y,
+      lightTextColor: U,
+      lightTextColorHover: te,
+      lightButtonColor: j,
+      lightButtonColorHover: Z,
+      lightDisabledBgColor: F,
+      darkTextColor: G,
+      darkTextColorHover: ee,
+      darkButtonColor: W,
+      darkButtonColorHover: L,
+      darkDisabledBgColor: V,
+      width: I,
+      paddingX: b,
+      paddingY: T,
+      disabled: f,
+      fontFamily: m,
+      fontSize: d,
+      fontWeight: _,
+      textAlign: S
+    } = Be(ae), D = t(() => {
+      const u = f.value ? "component-disabled" : "", n = q.value !== "b" ? "inline-block" : "block", c = !I.value || I.value < 86 ? 86 : I.value, H = !b.value || b.value < 0 ? 1 : b.value, oe = !T.value || T.value < 0 ? 0.2 : T.value, ie = m.value ? m.value : "'Lato', sans-serif", be = d.value ? d.value : "1.6em", M = !_.value || _.value < 0 ? 200 : _.value, v = S.value ? S.value : "center";
       return {
-        disabled: a,
-        display: o,
-        buttonColor: d,
-        buttonHoverColor: v,
-        textColor: u,
-        textHoverColor: n,
+        disabled: u,
+        display: n,
         width: c,
-        paddingX: k,
-        paddingY: F,
-        font: G,
-        fontSize: le,
-        fontWeight: ae,
-        textAlign: K
+        paddingX: H,
+        paddingY: oe,
+        font: ie,
+        fontSize: be,
+        fontWeight: M,
+        textAlign: v
       };
-    }), W = t(() => L.value.disabled), m = t(() => {
-      const a = L.value;
+    }), P = t(() => D.value.disabled), J = t(() => {
+      const u = D.value;
       return {
-        display: a.display,
-        textAlign: a.textAlign
+        display: u.display,
+        textAlign: u.textAlign
       };
-    }), h = t(() => {
-      const a = L.value;
+    }), w = t(() => {
+      const u = D.value;
       return {
         minWidth: "33px",
-        width: a.display === "block" ? "auto" : `${a.width}px`,
-        padding: `${a.paddingY}rem ${a.paddingX}rem`,
+        width: u.display === "block" ? "auto" : `${u.width}px`,
+        padding: `${u.paddingY}rem ${u.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: a.fontSize,
-        fontWeight: a.fontWeight
+        fontSize: u.fontSize,
+        fontWeight: u.fontWeight
       };
-    }), R = t(() => L.value.font), s = t(() => L.value.textColor), $ = t(() => L.value.textHoverColor), g = t(() => {
-      const a = L.value;
-      return `linear-gradient(${a.buttonColor}, ${a.buttonColor}) center bottom / 1px 1px repeat-x`;
-    }), p = t(() => {
-      const a = L.value;
-      return `linear-gradient(${a.buttonHoverColor}, ${a.buttonHoverColor}) center bottom / 100% 100% repeat-x`;
-    }), i = t(() => {
-      const a = {};
-      C.value && Object.keys(C.value).forEach((v) => a[`aria-${v}`] = C.value[v]);
-      const o = {
-        "aria-label": E.value,
-        "aria-disabled": I.value,
-        ...a
+    }), x = t(() => D.value.font), R = t(() => Y.value === "dark" ? "component__theme--dark" : "component__theme--light"), K = t(() => U.value), p = t(() => te.value), s = t(() => `linear-gradient(${j.value}, ${j.value}) center bottom / 1px 1px repeat-x`), N = t(() => `linear-gradient(${Z.value}, ${Z.value}) center bottom / 100% 100% repeat-x`);
+    t(() => F.value);
+    const z = t(() => G.value), B = t(() => ee.value), E = t(() => `linear-gradient(${W.value}, ${W.value}) center bottom / 1px 1px repeat-x`), h = t(() => `linear-gradient(${L.value}, ${L.value}) center bottom / 100% 100% repeat-x`);
+    t(() => V.value);
+    const r = t(() => {
+      const u = {};
+      y.value && Object.keys(y.value).forEach((H) => u[`aria-${H}`] = y.value[H]);
+      const n = {
+        "aria-label": Q.value,
+        "aria-disabled": f.value,
+        ...u
       };
       return Object.fromEntries(
-        Object.entries(o).filter(([d, v]) => v != null)
+        Object.entries(n).filter(([c, H]) => H != null)
       );
-    }), r = () => {
+    }), i = () => {
       X("clicked");
     };
-    return (a, o) => e.nbId ? (J(), Q("div", ie({
+    return (u, n) => e.nbId ? (fe(), ve("div", Se({
       key: 0,
-      class: ["nb-wrapper", W.value],
-      style: [m.value],
+      class: ["nb-wrapper", P.value],
+      style: [J.value],
       tabIndex: e.tabIndex,
       role: "button"
-    }, i.value, {
-      onClick: r,
+    }, r.value, {
+      onClick: i,
       onKeydown: [
-        o[0] || (o[0] = Y(z((d) => !B(I) && e.hasTabIndexEnter && r(), ["prevent"]), ["enter"])),
-        o[1] || (o[1] = Y(z((d) => !B(I) && e.hasTabIndexSpace && r(), ["prevent"]), ["space"]))
+        n[0] || (n[0] = O(A((c) => !o(f) && e.hasTabIndexEnter && i(), ["prevent"]), ["enter"])),
+        n[1] || (n[1] = O(A((c) => !o(f) && e.hasTabIndexSpace && i(), ["prevent"]), ["space"]))
       ]
     }), [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: "nb-reset component",
-        style: M([h.value])
+        class: pe(["nb-reset component", [R.value]]),
+        style: se([w.value])
       }, [
-        oe(a.$slots, "content", {}, () => [
-          o[2] || (o[2] = re("Default Text"))
+        he(u.$slots, "content", {}, () => [
+          n[2] || (n[2] = Ce("Default Text"))
         ], !0)
-      ], 12, Ha)
-    ], 16, Na)) : te("", !0);
+      ], 14, $a)
+    ], 16, wa)) : ye("", !0);
   }
-}), Ta = /* @__PURE__ */ ve(Aa, [["__scopeId", "data-v-9169eb04"]]);
-const ka = ["id"], Oa = ["disabled", "aria-label", "aria-haspopup", "aria-expanded", "tabindex"], Wa = ["aria-expanded", "title", "tabindex"], _a = ["disabled", "tabindex", "onClick", "onKeydown"], Ra = {
+}), _a = /* @__PURE__ */ ke(Ia, [["__scopeId", "data-v-d0591167"]]);
+const Da = ["id"], Na = ["disabled", "aria-label", "aria-haspopup", "aria-expanded", "tabindex"], Ha = ["aria-expanded", "title", "tabindex"], Aa = ["disabled", "tabindex", "onClick", "onKeydown"], La = {
   key: 0,
   class: "split-button__menu-item-icon"
-}, za = { class: "split-button__menu-item-text" }, La = /* @__PURE__ */ Object.assign({
-  name: "NbButtonSplit",
+}, Oa = { class: "split-button__menu-item-text" }, Wa = /* @__PURE__ */ Object.assign({
+  name: "NbButtonSplitDropdown",
   inheritAttrs: !1
 }, {
   __name: "NbButtonSplitDropdown",
@@ -2936,8 +3556,8 @@ const ka = ["id"], Oa = ["disabled", "aria-label", "aria-haspopup", "aria-expand
       type: String,
       default: "ib",
       validator: (e = "ib") => {
-        const b = e ? e.toLowerCase() : "";
-        return ["b", "ib"].includes(b);
+        const l = e ? e.toLowerCase() : "";
+        return ["b", "ib"].includes(l);
       }
     },
     mainButtonText: {
@@ -2952,7 +3572,7 @@ const ka = ["id"], Oa = ["disabled", "aria-label", "aria-haspopup", "aria-expand
       type: Array,
       default: () => [],
       validator: (e) => Array.isArray(e) && e.every(
-        (b) => typeof b == "object" && b !== null && "label" in b
+        (l) => typeof l == "object" && l !== null && "label" in l
       )
     },
     popupButtonTitle: {
@@ -2979,54 +3599,6 @@ const ka = ["id"], Oa = ["disabled", "aria-label", "aria-haspopup", "aria-expand
       type: Object,
       default: () => ({})
     },
-    textColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    textHoverColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    buttonColor: {
-      type: String,
-      default: "hsl(220 75% 50%)"
-    },
-    buttonHoverColor: {
-      type: String,
-      default: "hsl(220 75% 45%)"
-    },
-    popupButtonHoverColor: {
-      type: String,
-      default: null
-    },
-    popupTextHoverColor: {
-      type: String,
-      default: "null"
-    },
-    buttonActiveColor: {
-      type: String,
-      default: "hsl(220 75% 40%)"
-    },
-    borderColor: {
-      type: String,
-      default: "hsl(220 50% 75%)"
-    },
-    borderHoverColor: {
-      type: String,
-      default: "tomato"
-    },
-    popupBgColor: {
-      type: String,
-      default: "#ffffff"
-    },
-    menuItemHoverColor: {
-      type: String,
-      default: "hsl(220 75% 95%)"
-    },
-    menuItemTextColor: {
-      type: String,
-      default: "#000000"
-    },
     menuItemFocusOutlineColor: {
       type: String,
       default: null
@@ -3107,376 +3679,474 @@ const ka = ["id"], Oa = ["disabled", "aria-label", "aria-haspopup", "aria-expand
     popupFontWeight: {
       type: Number,
       default: null
+    },
+    theme: {
+      type: String,
+      default: "light",
+      validator: (e) => ["dark", "light"].indexOf(e) !== -1
+    },
+    // Cores do tema light
+    lightButtonColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightButtonColorHover: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    lightTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightTextColorHover: {
+      type: String,
+      default: "#000000"
+    },
+    lightBorderColor: {
+      type: String,
+      default: "#cccccc"
+    },
+    lightBorderColorHover: {
+      type: String,
+      default: "#bbbbbb"
+    },
+    lightPopupBgColor: {
+      type: String,
+      default: "#ffffff"
+    },
+    lightMenuItemHoverColor: {
+      type: String,
+      default: "#f5f5f5"
+    },
+    lightMenuItemTextColor: {
+      type: String,
+      default: "#333333"
+    },
+    lightDisabledBgColor: {
+      type: String,
+      default: "#dfdfd9"
+    },
+    // Cores do tema dark
+    darkButtonColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkButtonColorHover: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkTextColorHover: {
+      type: String,
+      default: "#ffffff"
+    },
+    darkBorderColor: {
+      type: String,
+      default: "#555555"
+    },
+    darkBorderColorHover: {
+      type: String,
+      default: "#666666"
+    },
+    darkPopupBgColor: {
+      type: String,
+      default: "#2d2d2d"
+    },
+    darkMenuItemHoverColor: {
+      type: String,
+      default: "#3d3d3d"
+    },
+    darkMenuItemTextColor: {
+      type: String,
+      default: "#e0e0e0"
+    },
+    darkDisabledBgColor: {
+      type: String,
+      default: "rgba(40, 42, 54, 1)"
     }
   },
   emits: ["clicked", "main-clicked", "menu-item-clicked"],
-  setup(e, { emit: b }) {
-    fe((l) => ({
-      "59ec4fa0": se.value.font
+  setup(e, { emit: l }) {
+    xe((a) => ({
+      a2b87d56: ge.value.font,
+      "68e0aa8a": o(M),
+      "230f2f9c": o(h),
+      "48b2d97c": o(n),
+      "60b88ec8": o(v),
+      "5d16bf24": o(p),
+      "08f39670": o(r)
     }));
-    const X = b, D = e, {
-      display: j,
-      mainButtonText: E,
-      mainButtonAriaLabel: C,
-      menuItems: H,
-      popupButtonTitle: A,
-      ariaLabel: O,
-      ariaAttrs: N,
-      textColor: x,
-      textHoverColor: V,
-      buttonColor: w,
-      buttonHoverColor: I,
-      popupButtonHoverColor: S,
-      popupTextHoverColor: T,
-      buttonActiveColor: f,
-      borderColor: y,
-      borderHoverColor: L,
-      popupBgColor: W,
-      menuItemHoverColor: m,
-      menuItemTextColor: h,
-      menuItemFocusOutlineColor: R,
-      menuItemFocusOutlineWidth: s,
-      menuItemFocusOutlineOffset: $,
-      showBorder: g,
-      showPopupButton: p,
-      borderRadius: i,
-      popupBorderRadius: r,
-      width: a,
-      paddingX: o,
-      paddingY: d,
-      popupPaddingX: v,
-      popupPaddingY: u,
-      disabled: n,
-      fontFamily: c,
-      fontSize: k,
-      fontWeight: F,
-      popupFontFamily: G,
-      popupFontSize: le,
-      popupFontWeight: ae
-    } = ce(D), K = me(!1), ne = me(null), de = me(null), U = me(null), be = me(null), Z = me(-1), pe = me(!1), se = t(() => {
-      const l = n.value ? "component-disabled" : "", _ = j.value !== "b" ? "inline-block" : "block", q = w.value ? w.value : "hsl(220 75% 50%)", ee = I.value ? I.value : "hsl(220 75% 45%)", ye = f.value ? f.value : "hsl(220 75% 40%)", ke = y.value ? y.value : "hsl(220 50% 75%)", et = L.value || ke, Oe = !i.value || i.value < 0 ? 0 : i.value, tt = r.value !== null && r.value !== void 0 ? r.value < 0 ? 0 : r.value : Oe, at = [!1, !0].includes(g.value) ? g.value : !0, ot = [!1, !0].includes(p.value) ? p.value : !0, lt = x.value ? x.value : "#ffffff", We = V.value ? V.value : "#ffffff", nt = S.value || ee, ut = T.value || We, rt = W.value ? W.value : "#ffffff", dt = m.value ? m.value : "hsl(220 75% 95%)", st = h.value ? h.value : "#000000", it = R.value || "currentColor", ft = s.value || "2px", ct = $.value || "-2px", _e = !o.value || o.value < 0 ? 1 : o.value, Re = !d.value || d.value < 0 ? 0.32 : d.value, vt = v.value !== null && v.value !== void 0 ? v.value < 0 ? 1 : v.value : _e, bt = u.value !== null && u.value !== void 0 ? u.value < 0 ? 0.2 : u.value : Re, ze = c.value ? c.value : "'Lato', sans-serif", Le = k.value ? k.value : "1.6em", Ye = !F.value || F.value < 0 ? 400 : F.value, pt = G.value || ze, yt = le.value || Le, mt = ae.value !== null && ae.value !== void 0 ? ae.value < 0 ? 400 : ae.value : Ye;
+    const X = l, ae = e, {
+      display: q,
+      mainButtonText: Q,
+      mainButtonAriaLabel: y,
+      menuItems: Y,
+      popupButtonTitle: U,
+      ariaLabel: te,
+      ariaAttrs: j,
+      menuItemFocusOutlineColor: Z,
+      menuItemFocusOutlineWidth: F,
+      menuItemFocusOutlineOffset: G,
+      showBorder: ee,
+      showPopupButton: W,
+      borderRadius: L,
+      popupBorderRadius: V,
+      width: I,
+      paddingX: b,
+      paddingY: T,
+      popupPaddingX: f,
+      popupPaddingY: m,
+      disabled: d,
+      fontFamily: _,
+      fontSize: S,
+      fontWeight: D,
+      popupFontFamily: P,
+      popupFontSize: J,
+      popupFontWeight: w,
+      theme: x,
+      lightButtonColor: R,
+      lightButtonColorHover: K,
+      lightTextColor: p,
+      lightTextColorHover: s,
+      lightBorderColor: N,
+      lightBorderColorHover: z,
+      lightPopupBgColor: B,
+      lightMenuItemHoverColor: E,
+      lightMenuItemTextColor: h,
+      lightDisabledBgColor: r,
+      darkButtonColor: i,
+      darkButtonColorHover: u,
+      darkTextColor: n,
+      darkTextColorHover: c,
+      darkBorderColor: H,
+      darkBorderColorHover: oe,
+      darkPopupBgColor: ie,
+      darkMenuItemHoverColor: be,
+      darkMenuItemTextColor: M,
+      darkDisabledBgColor: v
+    } = Be(ae), g = Te(!1), le = Te(null), $ = Te(null), k = Te(null), ue = Te(null), ne = Te(-1), me = Te(!1), ge = t(() => {
+      const a = d.value ? "component-disabled" : "", C = q.value !== "b" ? "inline-block" : "block", re = !L.value || L.value < 0 ? 0 : L.value, ce = V.value !== null && V.value !== void 0 ? V.value < 0 ? 0 : V.value : re, Ve = [!1, !0].includes(ee.value) ? ee.value : !0, we = [!1, !0].includes(W.value) ? W.value : !0, $e = Z.value || "currentColor", He = F.value || "2px", Xe = G.value || "-2px", Ke = !b.value || b.value < 0 ? 1 : b.value, Me = !T.value || T.value < 0 ? 0.32 : T.value, ct = f.value !== null && f.value !== void 0 ? f.value < 0 ? 1 : f.value : Ke, ft = m.value !== null && m.value !== void 0 ? m.value < 0 ? 0.2 : m.value : Me, qe = _.value ? _.value : "'Lato', sans-serif", Ue = S.value ? S.value : "1.6em", Ge = !D.value || D.value < 0 ? 400 : D.value, vt = P.value || qe, pt = J.value || Ue, bt = w.value !== null && w.value !== void 0 ? w.value < 0 ? 400 : w.value : Ge, gt = x.value ? x.value : "light";
       return {
-        disabled: l,
-        display: _,
-        buttonColor: q,
-        buttonHoverColor: ee,
-        popupButtonHoverColor: nt,
-        popupTextHoverColor: ut,
-        buttonActiveColor: ye,
-        borderColor: ke,
-        borderHoverColor: et,
-        showBorder: at,
-        showPopupButton: ot,
-        borderRadius: Oe,
-        popupBorderRadius: tt,
-        textColor: lt,
-        textHoverColor: We,
-        popupBgColor: rt,
-        menuItemHoverColor: dt,
-        menuItemTextColor: st,
-        menuItemFocusOutlineColor: it,
-        menuItemFocusOutlineWidth: ft,
-        menuItemFocusOutlineOffset: ct,
-        paddingX: _e,
-        paddingY: Re,
-        popupPaddingX: vt,
-        popupPaddingY: bt,
-        font: ze,
-        fontSize: Le,
-        fontWeight: Ye,
-        popupFont: pt,
-        popupFontSize: yt,
-        popupFontWeight: mt
+        disabled: a,
+        display: C,
+        showBorder: Ve,
+        showPopupButton: we,
+        borderRadius: re,
+        popupBorderRadius: ce,
+        menuItemFocusOutlineColor: $e,
+        menuItemFocusOutlineWidth: He,
+        menuItemFocusOutlineOffset: Xe,
+        paddingX: Ke,
+        paddingY: Me,
+        popupPaddingX: ct,
+        popupPaddingY: ft,
+        font: qe,
+        fontSize: Ue,
+        fontWeight: Ge,
+        popupFont: vt,
+        popupFontSize: pt,
+        popupFontWeight: bt,
+        theme: gt
       };
-    }), ge = t(() => se.value.disabled), he = t(() => ({
-      display: se.value.display
-    })), Be = t(() => {
-      const l = se.value, _ = l.display === "block" ? {} : { width: a.value ? `${a.value}px` : "auto" };
+    }), Ie = t(() => {
+      switch (ge.value.theme) {
+        case "dark":
+          return "component__theme--dark";
+        default:
+          return "component__theme--light";
+      }
+    }), _e = t(() => ge.value.disabled), De = t(() => ({
+      display: ge.value.display
+    })), Ne = t(() => {
+      const a = ge.value, C = a.display === "block" ? {} : { width: I.value ? `${I.value}px` : "auto" };
       return {
-        borderRadius: `${l.borderRadius}rem`,
+        borderRadius: `${a.borderRadius}rem`,
         overflow: "visible",
         position: "relative",
-        ..._
+        ...C
       };
-    }), we = t(() => {
-      const l = se.value, _ = a.value ? `${a.value}px` : "auto", q = l.showPopupButton ? {
-        borderTopLeftRadius: `${l.borderRadius}rem`,
-        borderBottomLeftRadius: `${l.borderRadius}rem`,
+    }), Re = t(() => {
+      const a = ge.value, C = I.value ? `${I.value}px` : "auto", re = a.showPopupButton ? {
+        borderTopLeftRadius: `${a.borderRadius}rem`,
+        borderBottomLeftRadius: `${a.borderRadius}rem`,
         borderTopRightRadius: "0",
         borderBottomRightRadius: "0"
       } : {
-        borderRadius: `${l.borderRadius}rem`
-      }, ee = l.showBorder ? l.showPopupButton ? {
-        borderTop: `1px solid ${l.borderColor}`,
-        borderBottom: `1px solid ${l.borderColor}`,
-        borderLeft: `1px solid ${l.borderColor}`,
+        borderRadius: `${a.borderRadius}rem`
+      }, ce = a.showBorder ? a.showPopupButton ? {
+        borderTop: `1px solid ${a.theme === "dark" ? H.value : N.value}`,
+        borderBottom: `1px solid ${a.theme === "dark" ? H.value : N.value}`,
+        borderLeft: `1px solid ${a.theme === "dark" ? H.value : N.value}`,
         borderRight: "none"
       } : {
-        border: `1px solid ${l.borderColor}`
-      } : { border: "none" };
+        border: `1px solid ${a.theme === "dark" ? H.value : N.value}`
+      } : { border: "none" }, Ve = a.theme === "dark" ? i.value : R.value, we = a.theme === "dark" ? n.value : p.value, $e = a.theme === "dark" ? u.value : K.value, He = a.theme === "dark" ? c.value : s.value, Xe = a.theme === "dark" ? oe.value : z.value;
       return {
-        color: l.textColor,
-        backgroundColor: l.buttonColor,
-        padding: `${l.paddingY}rem ${l.paddingX}rem`,
+        color: we,
+        backgroundColor: Ve,
+        padding: `${a.paddingY}rem ${a.paddingX}rem`,
         lineHeight: "1.42857143",
-        fontSize: l.fontSize,
-        fontWeight: l.fontWeight,
-        fontFamily: l.font,
-        ...ee,
-        ...q,
-        minWidth: _ === "auto" ? "33px" : _,
-        "--main-button-hover-color": l.buttonHoverColor,
-        "--main-button-active-color": l.buttonActiveColor,
-        "--main-text-hover-color": l.textHoverColor,
-        "--main-border-hover-color": l.borderHoverColor
+        fontSize: a.fontSize,
+        fontWeight: a.fontWeight,
+        fontFamily: a.font,
+        ...ce,
+        ...re,
+        minWidth: C === "auto" ? "33px" : C,
+        "--main-button-hover-color": $e,
+        "--main-button-active-color": $e,
+        "--main-text-hover-color": He,
+        "--main-border-hover-color": Xe
       };
-    }), Xe = t(() => {
-      const l = se.value, _ = l.showBorder ? {
-        borderTop: `1px solid ${l.borderColor}`,
-        borderBottom: `1px solid ${l.borderColor}`,
-        borderRight: `1px solid ${l.borderColor}`,
-        borderLeft: `1px solid ${l.borderColor}`
-      } : { border: "none" };
+    }), Je = t(() => {
+      const a = ge.value, C = a.theme === "dark" ? H.value : N.value, re = a.showBorder ? {
+        borderTop: `1px solid ${C}`,
+        borderBottom: `1px solid ${C}`,
+        borderRight: `1px solid ${C}`,
+        borderLeft: `1px solid ${C}`
+      } : { border: "none" }, ce = a.theme === "dark" ? i.value : R.value, Ve = a.theme === "dark" ? n.value : p.value, we = a.theme === "dark" ? u.value : K.value, $e = a.theme === "dark" ? c.value : s.value, He = a.theme === "dark" ? oe.value : z.value;
       return {
-        color: l.textColor,
-        backgroundColor: l.buttonColor,
-        padding: `${l.paddingY}rem ${l.paddingX * 0.5}rem`,
-        fontSize: l.fontSize,
-        fontWeight: l.fontWeight,
-        fontFamily: l.font,
-        ..._,
-        borderTopRightRadius: `${l.borderRadius}rem`,
-        borderBottomRightRadius: `${l.borderRadius}rem`,
+        color: Ve,
+        backgroundColor: ce,
+        padding: `${a.paddingY}rem ${a.paddingX * 0.5}rem`,
+        fontSize: a.fontSize,
+        fontWeight: a.fontWeight,
+        fontFamily: a.font,
+        ...re,
+        borderTopRightRadius: `${a.borderRadius}rem`,
+        borderBottomRightRadius: `${a.borderRadius}rem`,
         borderTopLeftRadius: "0",
         borderBottomLeftRadius: "0",
-        "--popup-button-hover-color": l.popupButtonHoverColor,
-        "--popup-button-active-color": l.buttonActiveColor,
-        "--popup-text-hover-color": l.popupTextHoverColor,
-        "--popup-border-hover-color": l.borderHoverColor
+        "--popup-button-hover-color": we,
+        "--popup-button-active-color": we,
+        "--popup-text-hover-color": $e,
+        "--popup-border-hover-color": He
       };
-    }), je = t(() => {
-      const l = se.value;
+    }), Qe = t(() => {
+      const a = ge.value, C = a.theme === "dark" ? ie.value : B.value, re = a.theme === "dark" ? M.value : h.value, ce = a.theme === "dark" ? be.value : E.value;
       return {
-        backgroundColor: l.popupBgColor,
-        color: l.menuItemTextColor,
-        borderRadius: `${l.popupBorderRadius}rem`,
+        backgroundColor: C,
+        color: re,
+        borderRadius: `${a.popupBorderRadius}rem`,
         boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-        minHeight: H.value.length === 0 ? "40px" : "auto",
-        "--menu-item-hover-color": l.menuItemHoverColor,
-        "--menu-item-focus-outline-color": l.menuItemFocusOutlineColor,
-        "--menu-item-focus-outline-width": l.menuItemFocusOutlineWidth,
-        "--menu-item-focus-outline-offset": l.menuItemFocusOutlineOffset
+        minHeight: Y.value.length === 0 ? "40px" : "auto",
+        "--menu-item-hover-color": ce,
+        "--menu-item-focus-outline-color": a.menuItemFocusOutlineColor,
+        "--menu-item-focus-outline-width": a.menuItemFocusOutlineWidth,
+        "--menu-item-focus-outline-offset": a.menuItemFocusOutlineOffset
       };
-    }), Ee = t(() => se.value.popupFont), Fe = t(() => se.value.popupFontSize), De = t(() => se.value.popupFontWeight), Ke = t(() => se.value.popupPaddingX), Pe = t(() => se.value.popupPaddingY), qe = t(() => ({
-      fontSize: Fe.value,
-      fontWeight: De.value,
-      fontFamily: Ee.value,
-      padding: `${Pe.value}rem ${Ke.value}rem`
+    }), Ze = t(() => ge.value.popupFont), et = t(() => ge.value.popupFontSize), tt = t(() => ge.value.popupFontWeight), at = t(() => ge.value.popupPaddingX), lt = t(() => ge.value.popupPaddingY), ot = t(() => ({
+      fontSize: et.value,
+      fontWeight: tt.value,
+      fontFamily: Ze.value,
+      padding: `${lt.value}rem ${at.value}rem`
     }));
     t(() => {
-      const l = {};
-      N.value && Object.keys(N.value).forEach((ee) => l[`aria-${ee}`] = N.value[ee]);
-      const _ = {
-        "aria-label": O.value,
-        "aria-disabled": n.value,
-        ...l
+      const a = {};
+      j.value && Object.keys(j.value).forEach((ce) => a[`aria-${ce}`] = j.value[ce]);
+      const C = {
+        "aria-label": te.value,
+        "aria-disabled": d.value,
+        ...a
       };
       return Object.fromEntries(
-        Object.entries(_).filter(([q, ee]) => ee != null)
+        Object.entries(C).filter(([re, ce]) => ce != null)
       );
     });
-    const Me = () => {
+    const nt = () => {
       document.dispatchEvent(new CustomEvent("splitbutton:close-all", {
-        detail: { excludeId: D.nbId }
+        detail: { excludeId: ae.nbId }
       }));
-    }, Ae = (l) => {
-      var _;
-      ((_ = l.detail) == null ? void 0 : _.excludeId) !== D.nbId && K.value && (K.value = !1, Z.value = -1, U.value && U.value.setAttribute("aria-expanded", "false"));
-    }, xe = () => {
-      n.value || (K.value || Me(), pe.value = !0, K.value = !K.value, K.value ? Ce(() => {
-        if (be.value) {
-          const l = be.value.querySelectorAll("button:not([disabled])");
-          if (l && l.length > 0) {
-            const _ = document.activeElement;
-            (_ === U.value || _ === de.value) && l[0].focus(), Z.value = 0;
+    }, Fe = (a) => {
+      var C;
+      ((C = a.detail) == null ? void 0 : C.excludeId) !== ae.nbId && g.value && (g.value = !1, ne.value = -1, k.value && k.value.setAttribute("aria-expanded", "false"));
+    }, Ae = () => {
+      d.value || (g.value || nt(), me.value = !0, g.value = !g.value, g.value ? Oe(() => {
+        if (ue.value) {
+          const a = ue.value.querySelectorAll("button:not([disabled])");
+          if (a && a.length > 0) {
+            const C = document.activeElement;
+            (C === k.value || C === $.value) && a[0].focus(), ne.value = 0;
           }
         }
         setTimeout(() => {
-          pe.value = !1;
+          me.value = !1;
         }, 10);
-      }) : (Z.value = -1, pe.value = !1));
-    }, Ie = () => {
-      if (!n.value) {
-        if (!p.value && H.value.length > 0) {
-          xe();
+      }) : (ne.value = -1, me.value = !1));
+    }, ze = () => {
+      if (!d.value) {
+        if (!W.value && Y.value.length > 0) {
+          Ae();
           return;
         }
         X("main-clicked"), X("clicked", { type: "main" });
       }
-    }, $e = (l, _) => {
-      l.disabled || n.value || (X("menu-item-clicked", { item: l, index: _ }), X("clicked", { type: "menu-item", item: l, index: _ }), K.value = !1, Z.value = -1);
-    }, Ue = () => {
-      U.value && U.value.setAttribute("aria-expanded", "true");
-    }, Ge = (l) => {
-      var _;
-      be.value && !be.value.contains(l.relatedTarget) && !((_ = ne.value) != null && _.contains(l.relatedTarget)) && (U.value && U.value.setAttribute("aria-expanded", "false"), K.value = !1, Z.value = -1);
-    }, Je = (l) => {
-      var _;
-      K.value && !((_ = ne.value) != null && _.contains(l.relatedTarget)) && (K.value = !1, Z.value = -1, U.value && U.value.setAttribute("aria-expanded", "false"));
-    }, Ve = (l) => {
-      (l.code === "Escape" || l.code === "Backspace") && K.value && (K.value = !1, Z.value = -1, !p.value && de.value ? de.value.focus() : U.value && U.value.focus());
-    }, Qe = (l) => {
-      l > 0 && (Z.value = l - 1, Ce(() => {
-        var q;
-        const _ = (q = be.value) == null ? void 0 : q.querySelectorAll("button:not([disabled])");
-        _ && _[Z.value] && _[Z.value].focus();
+    }, Ye = (a, C) => {
+      a.disabled || d.value || (X("menu-item-clicked", { item: a, index: C }), X("clicked", { type: "menu-item", item: a, index: C }), g.value = !1, ne.value = -1);
+    }, rt = () => {
+      k.value && k.value.setAttribute("aria-expanded", "true");
+    }, ut = (a) => {
+      var C;
+      ue.value && !ue.value.contains(a.relatedTarget) && !((C = le.value) != null && C.contains(a.relatedTarget)) && (k.value && k.value.setAttribute("aria-expanded", "false"), g.value = !1, ne.value = -1);
+    }, dt = (a) => {
+      var C;
+      g.value && !((C = le.value) != null && C.contains(a.relatedTarget)) && (g.value = !1, ne.value = -1, k.value && k.value.setAttribute("aria-expanded", "false"));
+    }, Le = (a) => {
+      (a.code === "Escape" || a.code === "Backspace") && g.value && (g.value = !1, ne.value = -1, !W.value && $.value ? $.value.focus() : k.value && k.value.focus());
+    }, it = (a) => {
+      a > 0 && (ne.value = a - 1, Oe(() => {
+        var re;
+        const C = (re = ue.value) == null ? void 0 : re.querySelectorAll("button:not([disabled])");
+        C && C[ne.value] && C[ne.value].focus();
       }));
-    }, Ze = (l) => {
-      var q;
-      const _ = (q = be.value) == null ? void 0 : q.querySelectorAll("button:not([disabled])");
-      _ && l < _.length - 1 && (Z.value = l + 1, Ce(() => {
-        _[Z.value] && _[Z.value].focus();
+    }, st = (a) => {
+      var re;
+      const C = (re = ue.value) == null ? void 0 : re.querySelectorAll("button:not([disabled])");
+      C && a < C.length - 1 && (ne.value = a + 1, Oe(() => {
+        C[ne.value] && C[ne.value].focus();
       }));
-    }, Te = (l) => {
-      var ee, ye;
-      if (pe.value || !K.value || (ee = ne.value) != null && ee.contains(l.target))
+    }, Pe = (a) => {
+      var ce, Ve;
+      if (me.value || !g.value || (ce = le.value) != null && ce.contains(a.target))
         return;
-      const _ = l.target;
-      ((ye = _.closest) == null ? void 0 : ye.call(_, ".nb-split-button")) !== ne.value && (K.value = !1, Z.value = -1, U.value && U.value.setAttribute("aria-expanded", "false"));
+      const C = a.target;
+      ((Ve = C.closest) == null ? void 0 : Ve.call(C, ".nb-split-button")) !== le.value && (g.value = !1, ne.value = -1, k.value && k.value.setAttribute("aria-expanded", "false"));
     };
-    return He(() => {
-      Ce(() => {
-        document.addEventListener("click", Te, !1), document.addEventListener("splitbutton:close-all", Ae);
+    return Ee(() => {
+      Oe(() => {
+        document.addEventListener("click", Pe, !1), document.addEventListener("splitbutton:close-all", Fe);
       });
-    }), xt(() => {
-      document.removeEventListener("click", Te, !1), document.removeEventListener("splitbutton:close-all", Ae);
-    }), (l, _) => e.nbId ? (J(), Q("div", {
+    }), mt(() => {
+      document.removeEventListener("click", Pe, !1), document.removeEventListener("splitbutton:close-all", Fe);
+    }), (a, C) => e.nbId ? (fe(), ve("div", {
       key: 0,
       ref_key: "wrapperRef",
-      ref: ne,
-      class: ue(["nb-wrapper", "nb-split-button", ge.value]),
-      style: M([he.value]),
-      onFocusout: Je
+      ref: le,
+      class: pe(["nb-wrapper", "nb-split-button", _e.value]),
+      style: se([De.value]),
+      onFocusout: dt
     }, [
-      P("div", {
+      de("div", {
         id: e.nbId,
-        class: ue(["nb-reset", "component", { "component--block": B(j) === "b" }]),
-        style: M([Be.value])
+        class: pe(["nb-reset", "component", { "component--block": o(q) === "b" }, Ie.value]),
+        style: se([Ne.value])
       }, [
-        P("button", {
+        de("button", {
           ref_key: "mainButtonRef",
-          ref: de,
-          class: ue(["split-button__main", { "split-button__main--disabled": B(n) }]),
-          style: M([we.value]),
-          disabled: B(n),
-          "aria-label": B(C),
-          "aria-haspopup": !B(p) && B(H).length > 0,
-          "aria-expanded": B(p) ? void 0 : K.value,
-          tabindex: B(n) ? -1 : 0,
-          onClick: z(Ie, ["stop"]),
+          ref: $,
+          class: pe(["split-button__main", { "split-button__main--disabled": o(d) }]),
+          style: se([Re.value]),
+          disabled: o(d),
+          "aria-label": o(y),
+          "aria-haspopup": !o(W) && o(Y).length > 0,
+          "aria-expanded": o(W) ? void 0 : g.value,
+          tabindex: o(d) ? -1 : 0,
+          onClick: A(ze, ["stop"]),
           onKeydown: [
-            _[0] || (_[0] = Y(z((q) => !B(n) && e.hasTabIndexEnter && Ie(), ["prevent"]), ["enter"])),
-            _[1] || (_[1] = Y(z((q) => !B(n) && e.hasTabIndexSpace && Ie(), ["prevent"]), ["space"]))
+            C[0] || (C[0] = O(A((re) => !o(d) && e.hasTabIndexEnter && ze(), ["prevent"]), ["enter"])),
+            C[1] || (C[1] = O(A((re) => !o(d) && e.hasTabIndexSpace && ze(), ["prevent"]), ["space"]))
           ]
         }, [
-          oe(l.$slots, "main-content", {}, () => [
-            re(Se(B(E)), 1)
+          he(a.$slots, "main-content", {}, () => [
+            Ce(We(o(Q)), 1)
           ], !0)
-        ], 46, Oa),
-        B(p) ? (J(), Q("span", {
+        ], 46, Na),
+        o(W) ? (fe(), ve("span", {
           key: 0,
           ref_key: "popupButtonRef",
-          ref: U,
-          class: ue(["split-button__popup-button", { "split-button__popup-button--open": K.value }]),
-          style: M([Xe.value]),
+          ref: k,
+          class: pe(["split-button__popup-button", { "split-button__popup-button--open": g.value }]),
+          style: se([Je.value]),
           "aria-haspopup": !0,
-          "aria-expanded": K.value,
-          title: B(A),
-          tabindex: B(n) ? -1 : 0,
-          onClick: z(xe, ["stop"]),
-          onFocusin: Ue,
-          onFocusout: Ge,
+          "aria-expanded": g.value,
+          title: o(U),
+          tabindex: o(d) ? -1 : 0,
+          onClick: A(Ae, ["stop"]),
+          onFocusin: rt,
+          onFocusout: ut,
           onKeydown: [
-            _[2] || (_[2] = Y(z((q) => !B(n) && xe(), ["prevent"]), ["enter"])),
-            _[3] || (_[3] = Y(z((q) => !B(n) && xe(), ["prevent"]), ["space"]))
+            C[2] || (C[2] = O(A((re) => !o(d) && Ae(), ["prevent"]), ["enter"])),
+            C[3] || (C[3] = O(A((re) => !o(d) && Ae(), ["prevent"]), ["space"]))
           ],
           onKeyup: [
-            Y(Ve, ["escape"]),
-            Y(Ve, ["backspace"])
+            O(Le, ["escape"]),
+            O(Le, ["backspace"])
           ]
         }, [
-          oe(l.$slots, "popup-icon", {}, () => [
-            (J(), Q("svg", {
-              class: ue(["split-button__icon", { "split-button__icon--open": K.value }]),
+          he(a.$slots, "popup-icon", {}, () => [
+            (fe(), ve("svg", {
+              class: pe(["split-button__icon", { "split-button__icon--open": g.value }]),
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               "stroke-width": "2"
-            }, _[4] || (_[4] = [
-              P("polyline", { points: "6 9 12 15 18 9" }, null, -1)
+            }, C[4] || (C[4] = [
+              de("polyline", { points: "6 9 12 15 18 9" }, null, -1)
             ]), 2))
           ], !0)
-        ], 46, Wa)) : te("", !0),
-        K.value ? (J(), Q("div", {
+        ], 46, Ha)) : ye("", !0),
+        g.value ? (fe(), ve("div", {
           key: 1,
           ref_key: "popupRef",
-          ref: be,
-          class: ue(["split-button__popup", { "split-button__popup--open": K.value }]),
-          style: M([je.value])
+          ref: ue,
+          class: pe(["split-button__popup", { "split-button__popup--open": g.value }]),
+          style: se([Qe.value])
         }, [
-          (J(!0), Q(Vt, null, Ct(B(H), (q, ee) => (J(), Q("button", {
-            key: ee,
-            class: ue(["split-button__menu-item", { "split-button__menu-item--disabled": q.disabled }]),
-            style: M([qe.value]),
-            disabled: q.disabled || B(n),
-            tabindex: q.disabled || B(n) ? -1 : 0,
-            onClick: z((ye) => $e(q, ee), ["stop"]),
+          (fe(!0), ve(ht, null, Ct(o(Y), (re, ce) => (fe(), ve("button", {
+            key: ce,
+            class: pe(["split-button__menu-item", { "split-button__menu-item--disabled": re.disabled }]),
+            style: se([ot.value]),
+            disabled: re.disabled || o(d),
+            tabindex: re.disabled || o(d) ? -1 : 0,
+            onClick: A((Ve) => Ye(re, ce), ["stop"]),
             onKeydown: [
-              Y(z((ye) => !q.disabled && !B(n) && $e(q, ee), ["prevent"]), ["enter"]),
-              Y(z((ye) => !q.disabled && !B(n) && $e(q, ee), ["prevent"]), ["space"]),
-              Y(z((ye) => Qe(ee), ["prevent"]), ["arrow-up"]),
-              Y(z((ye) => Ze(ee), ["prevent"]), ["arrow-down"]),
-              Y(z(Ve, ["prevent"]), ["escape"]),
-              Y(z(Ve, ["prevent"]), ["backspace"])
+              O(A((Ve) => !re.disabled && !o(d) && Ye(re, ce), ["prevent"]), ["enter"]),
+              O(A((Ve) => !re.disabled && !o(d) && Ye(re, ce), ["prevent"]), ["space"]),
+              O(A((Ve) => it(ce), ["prevent"]), ["arrow-up"]),
+              O(A((Ve) => st(ce), ["prevent"]), ["arrow-down"]),
+              O(A(Le, ["prevent"]), ["escape"]),
+              O(A(Le, ["prevent"]), ["backspace"])
             ]
           }, [
-            q.icon ? (J(), Q("span", Ra, [
-              oe(l.$slots, `item-icon-${ee}`, { item: q }, () => [
-                re(Se(q.icon), 1)
+            re.icon ? (fe(), ve("span", La, [
+              he(a.$slots, `item-icon-${ce}`, { item: re }, () => [
+                Ce(We(re.icon), 1)
               ], !0)
-            ])) : te("", !0),
-            P("span", za, Se(q.label), 1)
-          ], 46, _a))), 128))
-        ], 6)) : te("", !0)
-      ], 14, ka)
-    ], 38)) : te("", !0);
+            ])) : ye("", !0),
+            de("span", Oa, We(re.label), 1)
+          ], 46, Aa))), 128))
+        ], 6)) : ye("", !0)
+      ], 14, Da)
+    ], 38)) : ye("", !0);
   }
-}), Ya = /* @__PURE__ */ ve(La, [["__scopeId", "data-v-75979bc7"]]), Ne = {
-  NbButtonVavaGame: It,
-  NbButtonShowHover: At,
-  NbButtonPrevNext: _t,
-  NbButtonMechanical: Yt,
-  NbButtonMechanical2: Ft,
-  NbButtonHamburger: qt,
-  NbButtonColorOutside: Jt,
-  NbButtonColorHover: ta,
+}), Ra = /* @__PURE__ */ ke(Wa, [["__scopeId", "data-v-2b74c5a0"]]), je = {
+  NbButtonVavaGame: Vt,
+  NbButtonShowHover: It,
+  NbButtonPrevNext: At,
+  NbButtonMechanical: Rt,
+  NbButtonMechanical2: jt,
+  NbButtonHamburger: Kt,
+  NbButtonColorOutside: Gt,
+  NbButtonColorHover: ea,
   NbButtonAlternateText: ra,
-  NbButtonBack: fa,
-  NbButtonNormal: xa,
-  NbButtonShadow: ha,
-  NbButtonUnderlineExpand: $a,
-  NbButtonUnderlineFill: Ta,
+  NbButtonBack: sa,
+  NbButtonNormal: ma,
+  NbButtonShadow: xa,
+  NbButtonUnderlineExpand: Ta,
+  NbButtonUnderlineFill: _a,
   NbButtonGradientBorderToBackground: pa,
-  NbButtonSplitDropdown: Ya
-}, ja = {
+  NbButtonSplitDropdown: Ra
+}, Ya = {
   install(e) {
-    for (const b in Ne)
-      if (Object.prototype.hasOwnProperty.call(Ne, b)) {
-        const X = Ne[b];
+    for (const l in je)
+      if (Object.prototype.hasOwnProperty.call(je, l)) {
+        const X = je[l];
         e.component(X.name, X);
       }
   }
 };
 export {
-  ja as default
+  Ya as default
 };