diff --git a/histoire/histoire.config.ts b/histoire/histoire.config.ts
index 1ecf53e..75a58b6 100644
--- a/histoire/histoire.config.ts
+++ b/histoire/histoire.config.ts
@@ -1,9 +1,11 @@
 import { resolve } from 'node:path'
+import { createRequire } from 'node:module'
 import { HstVue } from '@histoire/plugin-vue'
 import Vue from '@vitejs/plugin-vue'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { defineConfig } from 'histoire'
 import path from 'path'
+const require = createRequire(import.meta.url)
 
 export default defineConfig({
     outDir: './dist',
@@ -38,6 +40,9 @@ export default defineConfig({
         }
     ],
     vite: {
+        resolve: {
+            alias: { 'histoire/client': require.resolve('histoire/client') },
+        },
         plugins: [
             Vue(),
             VueI18nPlugin({
@@ -67,4 +72,4 @@ export default defineConfig({
             },
         ],
     },
-})
\ No newline at end of file
+})
diff --git a/packages/formcontrols/dist/index.mjs b/packages/formcontrols/dist/index.mjs
index 683d3c6..e846d17 100644
--- a/packages/formcontrols/dist/index.mjs
+++ b/packages/formcontrols/dist/index.mjs
@@ -1,5 +1,5 @@
-import { createElementBlock as s, openBlock as l, normalizeClass as f, renderSlot as A, createTextVNode as I, toDisplayString as c, createElementVNode as i, createCommentVNode as o, createVNode as S, unref as t, withCtx as F, useAttrs as H, computed as B, withDirectives as K, vModelCheckbox as W, withKeys as E, withModifiers as N, createBlock as v, mergeProps as z, ref as T, mergeModels as Z, useModel as J, Fragment as R, renderList as U, vModelSelect as Q } from "vue";
-import { LucideChevronRight as x, LucideLock as C, LucideEyeOff as X, LucideEye as Y, LucideLockOpen as _ } from "lucide-vue-next";
+import { openBlock as l, createElementBlock as s, normalizeClass as u, renderSlot as A, createTextVNode as I, toDisplayString as c, createElementVNode as i, createVNode as S, unref as t, withCtx as F, createCommentVNode as o, useAttrs as G, computed as C, withDirectives as K, vModelCheckbox as H, withKeys as E, withModifiers as p, mergeProps as z, createBlock as v, ref as T, useModel as Z, Fragment as R, renderList as U, vModelSelect as J, mergeModels as Q } from "vue";
+import { LucideChevronRight as D, LucideLock as N, LucideEyeOff as X, LucideEye as Y, LucideLockOpen as _ } from "@lucide/vue";
 import { LucideGenericIcon as O } from "@2fauth/ui";
 import { UseColorMode as j } from "@vueuse/components";
 import { useColorMode as ee } from "@vueuse/core";
@@ -33,7 +33,7 @@ const te = ["type", "disabled"], q = {
     return (a, y) => (l(), s("button", {
       type: e.nativeType,
       disabled: e.isLoading || e.isDisabled,
-      class: f({
+      class: u({
         button: !0,
         [`${e.color}`]: !0,
         "is-loading": e.isLoading
@@ -47,7 +47,7 @@ const te = ["type", "disabled"], q = {
 }, le = { class: "field is-grouped" }, ae = { class: "control" }, ie = {
   key: 0,
   class: "control"
-}, yt = {
+}, gt = {
   __name: "FormButtons",
   props: {
     showCancelButton: {
@@ -161,10 +161,10 @@ function w(e) {
     valErrorId: "valError" + e[0].toUpperCase() + e.toLowerCase().slice(1)
   };
 }
-const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-describedby"], de = ["for", "onKeypress"], oe = { class: "icon-text" }, re = {
+const se = ["id", "name", "disabled", "aria-describedby"], ne = ["for", "onKeypress"], de = { class: "icon-text" }, oe = {
   key: 0,
   class: "icon"
-}, ue = ["id"], ht = /* @__PURE__ */ Object.assign({
+}, re = ["id"], bt = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "FormCheckbox",
@@ -189,11 +189,13 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
     },
     isIndented: Boolean,
     isDisabled: Boolean,
-    isLocked: Boolean
+    isLocked: Boolean,
+    isWarning: Boolean,
+    isDanger: Boolean
   },
   emits: ["update:modelValue"],
   setup(e, { emit: n }) {
-    const a = e, y = n, b = $("legend", a.fieldName).inputId, d = H(), r = B({
+    const a = e, y = n, b = $("legend", a.fieldName).inputId, d = G(), r = C({
       get() {
         return a.modelValue;
       },
@@ -204,12 +206,14 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
     function m() {
       d.disabled != !0 && (r.value = !r.value);
     }
-    return (k, L) => (l(), s("div", se, [
+    return (k, L) => (l(), s("div", {
+      class: u(["field is-flex", { "is-left-bordered-warning": e.isWarning, "is-left-bordered-danger": e.isDanger }])
+    }, [
       e.isIndented ? (l(), s("div", {
         key: 0,
-        class: f(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
+        class: u(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
       }, [
-        S(t(x), { class: "has-text-grey rotate-135" })
+        S(t(D), { class: "has-text-grey rotate-135" })
       ], 2)) : o("", !0),
       i("div", null, [
         K(i("input", {
@@ -220,31 +224,31 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           "onUpdate:modelValue": L[0] || (L[0] = (h) => r.value = h),
           disabled: e.isDisabled || e.isLocked,
           "aria-describedby": e.help ? t(b) : void 0
-        }, null, 8, ne), [
-          [W, r.value]
+        }, null, 8, se), [
+          [H, r.value]
         ]),
         i("label", {
           tabindex: "0",
           for: e.fieldName,
-          class: f(["label", e.labelClass]),
-          onKeypress: E(N(m, ["prevent"]), ["space"])
+          class: u(["label", e.labelClass]),
+          onKeypress: E(p(m, ["prevent"]), ["space"])
         }, [
-          i("span", oe, [
+          i("span", de, [
             i("span", null, c(k.$t(a.label)), 1),
-            e.isLocked ? (l(), s("span", re, [
-              S(t(C), { class: "icon-size-1" })
+            e.isLocked ? (l(), s("span", oe, [
+              S(t(N), { class: "icon-size-1" })
             ])) : o("", !0)
           ])
-        ], 42, de),
+        ], 42, ne),
         e.help ? (l(), s("p", {
           key: 0,
           id: t(b),
           class: "help"
-        }, c(k.$t(e.help)), 9, ue)) : o("", !0)
+        }, c(k.$t(e.help)), 9, re)) : o("", !0)
       ])
-    ]));
+    ], 2));
   }
-}), ce = { role: "alert" }, fe = ["id"], V = {
+}), ue = { role: "alert" }, ce = ["id"], V = {
   __name: "FormFieldError",
   props: {
     error: {
@@ -262,23 +266,23 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   },
   setup(e) {
     const n = e, { valErrorId: a } = w(n.field);
-    return (y, b) => (l(), s("div", ce, [
+    return (y, b) => (l(), s("div", ue, [
       i("p", {
         id: t(a),
-        class: f(["help", e.alertType])
-      }, c(e.error), 11, fe)
+        class: u(["help", e.alertType])
+      }, c(e.error), 11, ce)
     ]));
   }
-}, me = { class: "field" }, ge = ["for"], be = { class: "icon-text" }, ye = {
+}, fe = { class: "field" }, me = ["for"], ge = { class: "icon-text" }, be = {
   key: 0,
   class: "icon"
-}, he = ["disabled", "id", "type", "value", "placeholder", "maxlength", "aria-describedby", "aria-invalid", "aria-errormessage"], ke = {
+}, ye = ["disabled", "id", "name", "type", "value", "placeholder", "maxlength", "aria-describedby", "aria-invalid", "aria-errormessage"], he = {
   key: 0,
   class: "icon is-small is-left"
-}, ve = {
+}, ke = {
   key: 1,
   class: "icon is-small is-right"
-}, $e = ["id"], kt = /* @__PURE__ */ Object.assign({
+}, ve = ["id"], yt = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "FormField",
@@ -348,32 +352,33 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   setup(e) {
     const n = e, { inputId: a } = $(n.inputType, n.fieldName + n.idSuffix), { valErrorId: y } = w(n.fieldName), b = $("legend", n.fieldName).inputId;
     return (d, r) => (l(), s("div", {
-      class: f(["mb-3", { "pt-3": e.hasOffset, "is-flex": e.isIndented }])
+      class: u(["mb-3", { "pt-3": e.hasOffset, "is-flex": e.isIndented }])
     }, [
       e.isIndented ? (l(), s("div", {
         key: 0,
-        class: f(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
+        class: u(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
       }, [
-        S(t(x), { class: "has-text-grey rotate-135" })
+        S(t(D), { class: "has-text-grey rotate-135" })
       ], 2)) : o("", !0),
-      i("div", me, [
+      i("div", fe, [
         i("label", {
           for: t(a),
-          class: f(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
+          class: u(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
         }, [
-          i("span", be, [
+          i("span", ge, [
             i("span", null, c(d.$t(n.label)), 1),
-            e.isLocked ? (l(), s("span", ye, [
-              S(t(C), { class: "icon-size-1" })
+            e.isLocked ? (l(), s("span", be, [
+              S(t(N), { class: "icon-size-1" })
             ])) : o("", !0)
           ])
-        ], 10, ge),
+        ], 10, me),
         i("div", {
-          class: f(["control", { "has-icons-left": e.leftIcon, "has-icons-right": e.rightIcon }])
+          class: u(["control", { "has-icons-left": e.leftIcon, "has-icons-right": e.rightIcon }])
         }, [
           i("input", z({
             disabled: e.isDisabled || e.isLocked,
             id: t(a),
+            name: e.fieldName,
             type: e.inputType,
             class: "input",
             value: e.modelValue,
@@ -385,8 +390,8 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
             "aria-describedby": e.help ? t(b) : void 0,
             "aria-invalid": e.errorMessage != null,
             "aria-errormessage": e.errorMessage != null ? t(y) : void 0
-          }), null, 16, he),
-          e.leftIcon ? (l(), s("span", ke, [
+          }), null, 16, ye),
+          e.leftIcon ? (l(), s("span", he, [
             e.leftIcon ? (l(), v(t(O), {
               key: 0,
               name: e.leftIcon,
@@ -395,7 +400,7 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
               color: e.iconColor
             }, null, 8, ["name", "stroke-width", "size", "color"])) : o("", !0)
           ])) : o("", !0),
-          e.rightIcon ? (l(), s("span", ve, [
+          e.rightIcon ? (l(), s("span", ke, [
             e.rightIcon ? (l(), v(t(O), {
               key: 0,
               name: e.rightIcon,
@@ -414,20 +419,20 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           key: 1,
           id: t(b),
           class: "help"
-        }, c(d.$t(e.help)), 9, $e)) : o("", !0)
+        }, c(d.$t(e.help)), 9, ve)) : o("", !0)
       ])
     ], 2));
   }
-}), Se = ["for"], Ie = { class: "icon-text" }, Le = {
+}), $e = ["for"], Se = { class: "icon-text" }, Ie = {
   key: 0,
   class: "icon"
-}, pe = { class: "control has-icons-right" }, Be = ["disabled", "id", "type", "value", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage"], Ce = ["title"], Ne = ["title"], Ve = {
+}, Le = { class: "control has-icons-right" }, Be = ["disabled", "name", "id", "type", "value", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage"], Ce = ["title"], Ne = ["title"], pe = {
   key: 0,
   class: "help is-warning"
-}, we = {
+}, Ve = {
   key: 2,
   class: "help"
-}, Me = ["id"], Te = { class: "column is-one-third" }, xe = { class: "has-text-weight-semibold" }, De = { class: "column" }, Fe = { class: "has-text-weight-semibold" }, vt = /* @__PURE__ */ Object.assign({
+}, we = ["id"], Me = { class: "column is-one-third" }, Te = { class: "has-text-weight-semibold" }, De = { class: "column" }, xe = { class: "has-text-weight-semibold" }, ht = /* @__PURE__ */ Object.assign({
   inheritAttrs: !0
 }, {
   __name: "FormPasswordField",
@@ -474,40 +479,38 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
     isLocked: Boolean
   },
   setup(e) {
-    const n = e, { inputId: a } = $(n.inputType, n.fieldName + n.idSuffix), { valErrorId: y } = w(n.fieldName), b = $("legend", n.fieldName).inputId, d = T(n.inputType), r = T(!1), m = B(() => /[a-z]/.test(n.modelValue ?? "")), k = B(() => /[A-Z]/.test(n.modelValue ?? "")), L = B(() => /[0-9]/.test(n.modelValue ?? "")), h = B(() => /[^A-Za-z0-9]/.test(n.modelValue ?? "")), D = B(() => {
-      var u;
-      return ((u = n.modelValue) == null ? void 0 : u.length) >= 8;
-    });
-    function P(u) {
-      typeof u.getModifierState == "function" && (r.value = !!u.getModifierState("CapsLock"));
+    const n = e, { inputId: a } = $(n.inputType, n.fieldName + n.idSuffix), { valErrorId: y } = w(n.fieldName), b = $("legend", n.fieldName).inputId, d = T(n.inputType), r = T(!1), m = C(() => /[a-z]/.test(n.modelValue ?? "")), k = C(() => /[A-Z]/.test(n.modelValue ?? "")), L = C(() => /[0-9]/.test(n.modelValue ?? "")), h = C(() => /[^A-Za-z0-9]/.test(n.modelValue ?? "")), x = C(() => n.modelValue?.length >= 8);
+    function P(f) {
+      typeof f.getModifierState == "function" && (r.value = !!f.getModifierState("CapsLock"));
     }
-    function M(u) {
-      d.value != u && (d.value = u);
+    function M(f) {
+      d.value != f && (d.value = f);
     }
-    return (u, g) => (l(), s("div", {
-      class: f(["field", { "pt-3": e.hasOffset }])
+    return (f, g) => (l(), s("div", {
+      class: u(["field", { "pt-3": e.hasOffset }])
     }, [
       i("label", {
         for: t(a),
         class: "label"
       }, [
-        i("span", Ie, [
-          i("span", null, c(u.$t(n.label)), 1),
-          e.isLocked ? (l(), s("span", Le, [
-            S(t(C), { class: "icon-size-1" })
+        i("span", Se, [
+          i("span", null, c(f.$t(n.label)), 1),
+          e.isLocked ? (l(), s("span", Ie, [
+            S(t(N), { class: "icon-size-1" })
           ])) : o("", !0)
         ])
-      ], 8, Se),
-      i("div", pe, [
+      ], 8, $e),
+      i("div", Le, [
         i("input", z({
           disabled: e.isDisabled || e.isLocked,
+          name: e.fieldName,
           id: t(a),
           type: d.value,
           class: "input",
           value: e.modelValue,
           placeholder: e.placeholder
-        }, u.$attrs, {
-          onInput: g[0] || (g[0] = (p) => u.$emit("update:modelValue", p.target.value)),
+        }, f.$attrs, {
+          onInput: g[0] || (g[0] = (B) => f.$emit("update:modelValue", B.target.value)),
           onKeyup: P,
           "aria-describedby": e.help ? t(b) : void 0,
           "aria-invalid": e.errorMessage != null,
@@ -519,9 +522,9 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           id: "btnTogglePassword",
           tabindex: "0",
           class: "icon is-small is-right is-clickable",
-          onKeyup: g[1] || (g[1] = E((p) => M("text"), ["enter"])),
-          onClick: g[2] || (g[2] = (p) => M("text")),
-          title: u.$t("tooltip.reveal_password")
+          onKeyup: g[1] || (g[1] = E((B) => M("text"), ["enter"])),
+          onClick: g[2] || (g[2] = (B) => M("text")),
+          title: f.$t("tooltip.reveal_password")
         }, [
           S(t(X))
         ], 40, Ce)) : (l(), s("span", {
@@ -530,72 +533,72 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           id: "btnTogglePassword",
           tabindex: "0",
           class: "icon is-small is-right is-clickable",
-          onKeyup: g[3] || (g[3] = E((p) => M("password"), ["enter"])),
-          onClick: g[4] || (g[4] = (p) => M("password")),
-          title: u.$t("tooltip.hide_password")
+          onKeyup: g[3] || (g[3] = E((B) => M("password"), ["enter"])),
+          onClick: g[4] || (g[4] = (B) => M("password")),
+          title: f.$t("tooltip.hide_password")
         }, [
           S(t(Y))
         ], 40, Ne))
       ]),
-      r.value ? (l(), s("p", Ve, c(u.$t("message.caps_lock_is_on")), 1)) : o("", !0),
+      r.value ? (l(), s("p", pe, c(f.$t("message.caps_lock_is_on")), 1)) : o("", !0),
       e.errorMessage != null ? (l(), v(t(V), {
         key: 1,
         error: e.errorMessage,
         field: e.fieldName
       }, null, 8, ["error", "field"])) : o("", !0),
-      e.help ? (l(), s("p", we, c(u.$t(e.help)), 1)) : o("", !0),
+      e.help ? (l(), s("p", Ve, c(f.$t(e.help)), 1)) : o("", !0),
       e.showRules ? (l(), s("div", {
         key: 3,
         id: t(b),
         class: "columns is-mobile is-size-7 mt-0"
       }, [
-        i("div", Te, [
-          i("span", xe, c(u.$t("message.mandatory_rules")), 1),
+        i("div", Me, [
+          i("span", Te, c(f.$t("message.mandatory_rules")), 1),
           g[5] || (g[5] = i("br", null, null, -1)),
           i("span", {
-            class: f(["is-underscored", { "is-dot": D.value }]),
+            class: u(["is-underscored", { "is-dot": x.value }]),
             id: "valPwdIsLongEnough"
           }, null, 2),
-          I(c(u.$t("message.is_long_enough")), 1),
+          I(c(f.$t("message.is_long_enough")), 1),
           g[6] || (g[6] = i("br", null, null, -1))
         ]),
         i("div", De, [
-          i("span", Fe, c(u.$t("message.optional_rules_you_should_follow")), 1),
+          i("span", xe, c(f.$t("message.optional_rules_you_should_follow")), 1),
           g[7] || (g[7] = i("br", null, null, -1)),
           i("span", {
-            class: f(["is-underscored", { "is-dot": m.value }]),
+            class: u(["is-underscored", { "is-dot": m.value }]),
             id: "valPwdHasLowerCase"
           }, null, 2),
-          I(c(u.$t("message.has_lower_case")), 1),
+          I(c(f.$t("message.has_lower_case")), 1),
           g[8] || (g[8] = i("br", null, null, -1)),
           i("span", {
-            class: f(["is-underscored", { "is-dot": k.value }]),
+            class: u(["is-underscored", { "is-dot": k.value }]),
             id: "valPwdHasUpperCase"
           }, null, 2),
-          I(c(u.$t("message.has_upper_case")), 1),
+          I(c(f.$t("message.has_upper_case")), 1),
           g[9] || (g[9] = i("br", null, null, -1)),
           i("span", {
-            class: f(["is-underscored", { "is-dot": h.value }]),
+            class: u(["is-underscored", { "is-dot": h.value }]),
             id: "valPwdHasSpecialChar"
           }, null, 2),
-          I(c(u.$t("message.has_special_char")), 1),
+          I(c(f.$t("message.has_special_char")), 1),
           g[10] || (g[10] = i("br", null, null, -1)),
           i("span", {
-            class: f(["is-underscored", { "is-dot": L.value }]),
+            class: u(["is-underscored", { "is-dot": L.value }]),
             id: "valPwdHasNumber"
           }, null, 2),
-          I(c(u.$t("message.has_number")), 1)
+          I(c(f.$t("message.has_number")), 1)
         ])
-      ], 8, Me)) : o("", !0)
+      ], 8, we)) : o("", !0)
     ], 2));
   }
-}), ze = { class: "field is-flex" }, Pe = ["for"], Ee = ["disabled", "id", "type", "value", "placeholder", "maxlength", "aria-describedby", "aria-invalid", "aria-errormessage"], Oe = {
+}), Fe = { class: "field is-flex" }, ze = ["for"], Pe = ["disabled", "id", "type", "value", "placeholder", "maxlength", "aria-describedby", "aria-invalid", "aria-errormessage"], Ee = {
   key: 0,
   class: "control"
-}, qe = ["title"], Ae = { class: "icon" }, Ke = {
+}, Oe = ["title"], qe = { class: "icon" }, Ae = {
   key: 1,
   class: "control"
-}, Re = ["title"], Ue = { class: "icon has-text-danger" }, je = ["id"], $t = /* @__PURE__ */ Object.assign({
+}, Ke = ["title"], Re = { class: "icon has-text-danger" }, Ue = ["id"], kt = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "FormProtectedField",
@@ -653,41 +656,41 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   },
   emits: ["update:modelValue"],
   setup(e, { emit: n }) {
-    const a = e, { inputId: y } = $(a.inputType, a.fieldName + a.idSuffix), { valErrorId: b } = w(a.fieldName), d = $("legend", a.fieldName).inputId, r = T(a.enableProtection), m = T(!1), k = T(0), L = B(() => !!(a.isDisabled || a.isLocked || a.enableProtection == !0 && r.value == !0)), h = n;
-    function D(u) {
-      const g = u.target.value.replace(/\s+/g, "");
+    const a = e, { inputId: y } = $(a.inputType, a.fieldName + a.idSuffix), { valErrorId: b } = w(a.fieldName), d = $("legend", a.fieldName).inputId, r = T(a.enableProtection), m = T(!1), k = T(0), L = C(() => !!(a.isDisabled || a.isLocked || a.enableProtection == !0 && r.value == !0)), h = n;
+    function x(f) {
+      const g = f.target.value.replace(/\s+/g, "");
       h("update:modelValue", g);
     }
-    function P(u) {
-      let g = u.target.value;
+    function P(f) {
+      let g = f.target.value;
       m.value = g.includes(" "), h("update:modelValue", g);
     }
-    function M(u) {
-      m.value = u.target.value.includes(" "), k.value += 1;
+    function M(f) {
+      m.value = f.target.value.includes(" "), k.value += 1;
     }
-    return (u, g) => (l(), s("div", ze, [
+    return (f, g) => (l(), s("div", Fe, [
       e.isIndented ? (l(), s("div", {
         key: 0,
-        class: f(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
+        class: u(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
       }, [
-        S(t(x), { class: "has-text-grey rotate-135" })
+        S(t(D), { class: "has-text-grey rotate-135" })
       ], 2)) : o("", !0),
       i("div", null, [
         i("label", {
           for: t(y),
-          class: f(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
+          class: u(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
         }, [
-          I(c(u.$t(a.label)), 1),
-          e.isLocked ? (l(), v(t(C), {
+          I(c(f.$t(a.label)), 1),
+          e.isLocked ? (l(), v(t(N), {
             key: 0,
             class: "ml-2 icon-size-1"
           })) : o("", !0)
-        ], 10, Pe),
+        ], 10, ze),
         i("div", {
-          class: f(["field has-addons mb-0", { "pt-3": e.hasOffset }])
+          class: u(["field has-addons mb-0", { "pt-3": e.hasOffset }])
         }, [
           i("div", {
-            class: f(["control", { "is-expanded": e.isExpanded }])
+            class: u(["control", { "is-expanded": e.isExpanded }])
           }, [
             (l(), s("input", z({
               key: k.value,
@@ -697,40 +700,40 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
               class: "input",
               value: e.modelValue,
               placeholder: e.placeholder
-            }, u.$attrs, {
+            }, f.$attrs, {
               onInput: P,
-              onChange: D,
+              onChange: x,
               onBlur: M,
               maxlength: e.maxLength,
               "aria-describedby": e.help ? t(d) : void 0,
               "aria-invalid": e.errorMessage != null,
               "aria-errormessage": e.errorMessage != null ? t(b) : void 0
-            }), null, 16, Ee))
+            }), null, 16, Pe))
           ], 2),
           e.enableProtection && !e.isLocked ? (l(), v(t(j), { key: 0 }, {
-            default: F(({ mode: p }) => [
-              r.value ? (l(), s("div", Oe, [
+            default: F(({ mode: B }) => [
+              r.value ? (l(), s("div", Ee, [
                 i("button", {
                   type: "button",
-                  class: f(["button field-lock", { "is-dark": p == "dark" }]),
-                  onClick: g[0] || (g[0] = N((G) => r.value = !1, ["stop"])),
-                  title: u.$t("tooltip.unlock")
+                  class: u(["button field-lock", { "is-dark": B == "dark" }]),
+                  onClick: g[0] || (g[0] = p((W) => r.value = !1, ["stop"])),
+                  title: f.$t("tooltip.unlock")
                 }, [
-                  i("span", Ae, [
-                    S(t(C))
+                  i("span", qe, [
+                    S(t(N))
                   ])
-                ], 10, qe)
-              ])) : (l(), s("div", Ke, [
+                ], 10, Oe)
+              ])) : (l(), s("div", Ae, [
                 i("button", {
                   type: "button",
-                  class: f(["button field-unlock", { "is-dark": p == "dark" }]),
-                  onClick: g[1] || (g[1] = N((G) => r.value = !0, ["stop"])),
-                  title: u.$t("tooltip.lock")
+                  class: u(["button field-unlock", { "is-dark": B == "dark" }]),
+                  onClick: g[1] || (g[1] = p((W) => r.value = !0, ["stop"])),
+                  title: f.$t("tooltip.lock")
                 }, [
-                  i("span", Ue, [
+                  i("span", Re, [
                     S(t(_))
                   ])
-                ], 10, Re)
+                ], 10, Ke)
               ]))
             ]),
             _: 1
@@ -738,7 +741,7 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
         ], 2),
         m.value ? (l(), v(t(V), {
           key: 0,
-          error: u.$t("error.spaces_are_ignored"),
+          error: f.$t("error.spaces_are_ignored"),
           field: "spaces",
           alertType: "is-warning"
         }, null, 8, ["error"])) : o("", !0),
@@ -751,13 +754,13 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           key: 2,
           id: t(d),
           class: "help"
-        }, c(u.$t(e.help)), 9, je)) : o("", !0)
+        }, c(f.$t(e.help)), 9, Ue)) : o("", !0)
       ])
     ]));
   }
-}), Ge = { class: "field is-flex" }, He = ["for"], We = { class: "control" }, Ze = { class: "select" }, Je = ["id", "disabled", "aria-describedby", "aria-invalid", "aria-errormessage"], Qe = ["value"], Xe = ["id"], St = {
+}), je = { class: "field is-flex" }, We = ["for"], Ge = { class: "control" }, He = ["id", "name", "disabled", "aria-describedby", "aria-invalid", "aria-errormessage"], Ze = ["value"], Je = ["id"], vt = {
   __name: "FormSelect",
-  props: /* @__PURE__ */ Z({
+  props: /* @__PURE__ */ Q({
     label: {
       type: String,
       default: ""
@@ -779,6 +782,10 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
     isIndented: Boolean,
     isDisabled: Boolean,
     isLocked: Boolean,
+    isLoading: {
+      type: Boolean,
+      default: !1
+    },
     idSuffix: {
       type: String,
       default: ""
@@ -789,29 +796,32 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = J(e, "modelValue"), a = e, { inputId: y } = $("select", a.fieldName + a.idSuffix), { valErrorId: b } = w(a.fieldName), d = $("legend", a.fieldName + a.idSuffix).inputId;
-    return (r, m) => (l(), s("div", Ge, [
+    const n = Z(e, "modelValue"), a = e, { inputId: y } = $("select", a.fieldName + a.idSuffix), { valErrorId: b } = w(a.fieldName), d = $("legend", a.fieldName + a.idSuffix).inputId;
+    return (r, m) => (l(), s("div", je, [
       e.isIndented ? (l(), s("div", {
         key: 0,
-        class: f(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
+        class: u(["pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
       }, [
-        S(t(x), { class: "has-text-grey rotate-135" })
+        S(t(D), { class: "has-text-grey rotate-135" })
       ], 2)) : o("", !0),
       i("div", null, [
         i("label", {
           for: t(y),
-          class: f(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
+          class: u(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
         }, [
           I(c(r.$t(a.label)), 1),
-          e.isLocked ? (l(), v(t(C), {
+          e.isLocked ? (l(), v(t(N), {
             key: 0,
             class: "ml-2 icon-size-1"
           })) : o("", !0)
-        ], 10, He),
-        i("div", We, [
-          i("div", Ze, [
+        ], 10, We),
+        i("div", Ge, [
+          i("div", {
+            class: u(["select", { "is-loading": e.isLoading == !0 }])
+          }, [
             K(i("select", {
               id: t(y),
+              name: e.fieldName,
               "onUpdate:modelValue": m[0] || (m[0] = (k) => n.value = k),
               disabled: e.isDisabled || e.isLocked,
               "aria-describedby": e.help ? t(d) : void 0,
@@ -821,11 +831,11 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
               (l(!0), s(R, null, U(e.options, (k) => (l(), s("option", {
                 key: k.value,
                 value: k.value
-              }, c(r.$t(k.text)), 9, Qe))), 128))
-            ], 8, Je), [
-              [Q, n.value]
+              }, c(r.$t(k.text)), 9, Ze))), 128))
+            ], 8, He), [
+              [J, n.value]
             ])
-          ]),
+          ], 2),
           A(r.$slots, "default")
         ]),
         e.errorMessage != null ? (l(), v(t(V), {
@@ -837,11 +847,11 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           key: 1,
           id: t(d),
           class: "help"
-        }, c(r.$t(e.help)), 9, Xe)) : o("", !0)
+        }, c(r.$t(e.help)), 9, Je)) : o("", !0)
       ])
     ]));
   }
-}, Ye = ["for"], _e = ["disabled", "id", "value", "placeholder", "maxlength", "aria-describedby", "aria-invalid", "aria-errormessage"], et = ["id"], It = /* @__PURE__ */ Object.assign({
+}, Qe = ["for"], Xe = ["disabled", "name", "id", "value", "placeholder", "maxlength", "aria-describedby", "aria-invalid", "aria-errormessage"], Ye = ["id"], $t = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "FormTextarea",
@@ -899,16 +909,16 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   setup(e) {
     const n = e, { inputId: a } = $(n.inputType, n.fieldName + n.idSuffix), { valErrorId: y } = w(n.fieldName), b = $("legend", n.fieldName).inputId;
     return (d, r) => (l(), s("div", {
-      class: f(["mb-3", { "pt-3": e.hasOffset, "is-flex": e.isIndented }])
+      class: u(["mb-3", { "pt-3": e.hasOffset, "is-flex": e.isIndented }])
     }, [
       e.isIndented ? (l(), s("div", {
         key: 0,
-        class: f(["mx-2 pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
+        class: u(["mx-2 pr-1", { "is-opacity-5": e.isDisabled || e.isLocked }])
       }, [
-        S(t(x), { class: "has-text-grey rotate-135" })
+        S(t(D), { class: "has-text-grey rotate-135" })
       ], 2)) : o("", !0),
       i("div", {
-        class: f(["field", { "is-flex-grow-5": e.isIndented }])
+        class: u(["field", { "is-flex-grow-5": e.isIndented }])
       }, [
         e.label ? (l(), s("label", {
           key: 0,
@@ -916,16 +926,17 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           class: "label"
         }, [
           I(c(d.$t(n.label)), 1),
-          e.isLocked ? (l(), v(t(C), {
+          e.isLocked ? (l(), v(t(N), {
             key: 0,
             class: "ml-2 icon-size-1"
           })) : o("", !0)
-        ], 8, Ye)) : o("", !0),
+        ], 8, Qe)) : o("", !0),
         i("div", {
-          class: f(["control", { "has-icons-left": e.leftIcon, "has-icons-right": e.rightIcon }])
+          class: u(["control", { "has-icons-left": e.leftIcon, "has-icons-right": e.rightIcon }])
         }, [
           i("textarea", z({
             disabled: e.isDisabled || e.isLocked,
+            name: e.fieldName,
             id: t(a),
             class: ["textarea has-fixed-size", e.fontSize],
             value: e.modelValue,
@@ -937,7 +948,7 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
             "aria-describedby": e.help ? t(b) : void 0,
             "aria-invalid": e.errorMessage != null,
             "aria-errormessage": e.errorMessage != null ? t(y) : void 0
-          }), null, 16, _e)
+          }), null, 16, Xe)
         ], 2),
         e.errorMessage != null ? (l(), v(t(V), {
           key: 1,
@@ -948,14 +959,14 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
           key: 2,
           id: t(b),
           class: "help"
-        }, c(d.$t(e.help)), 9, et)) : o("", !0)
+        }, c(d.$t(e.help)), 9, Ye)) : o("", !0)
       ], 2)
     ], 2));
   }
-}), tt = ["aria-describedby", "aria-invalid", "aria-errormessage"], lt = ["id", "title", "aria-checked", "disabled", "onClick"], at = ["id", "checked", "value", "disabled"], it = {
+}), _e = ["aria-describedby", "aria-invalid", "aria-errormessage"], et = ["id", "title", "aria-checked", "disabled", "onClick"], tt = ["id", "checked", "value", "disabled"], lt = {
   key: 0,
   class: "is-block is-size-7"
-}, st = ["for"], nt = ["id"], Lt = {
+}, at = ["for"], it = ["id"], St = {
   __name: "FormToggle",
   props: {
     modelValue: [String, Number, Boolean],
@@ -987,14 +998,14 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
       y("update:modelValue", m);
     }
     return (m, k) => (l(), s("div", {
-      class: f(["field", { "pt-3": e.hasOffset }])
+      class: u(["field", { "pt-3": e.hasOffset }])
     }, [
       e.label ? (l(), s("span", {
         key: 0,
-        class: f(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
+        class: u(["label", { "is-opacity-5": e.isDisabled || e.isLocked }])
       }, [
         I(c(m.$t(a.label)), 1),
-        e.isLocked ? (l(), v(t(C), {
+        e.isLocked ? (l(), v(t(N), {
           key: 0,
           class: "ml-2 icon-size-1"
         })) : o("", !0)
@@ -1014,15 +1025,15 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
               id: t($)("button", e.fieldName + h.value).inputId,
               role: "radio",
               type: "button",
-              class: f(["button", {
+              class: u(["button", {
                 "is-link": e.modelValue === h.value,
-                "is-dark": L == "dark",
+                "is-dark": L == "dark" && e.modelValue !== h.value,
                 "is-multiline": h.legend
               }]),
               title: h.title ? m.$t(h.title) : m.$t(h.text),
               "aria-checked": e.modelValue === h.value,
               disabled: e.isDisabled || e.isLocked,
-              onClick: N((D) => r(h.value), ["stop"])
+              onClick: p((x) => r(h.value), ["stop"])
             }, [
               i("input", {
                 id: t($)("radio", h.value).inputId,
@@ -1031,8 +1042,8 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
                 checked: e.modelValue === h.value,
                 value: h.value,
                 disabled: e.isDisabled || e.isLocked
-              }, null, 8, at),
-              h.legend ? (l(), s("span", it, c(m.$t(h.legend)), 1)) : o("", !0),
+              }, null, 8, tt),
+              h.legend ? (l(), s("span", lt, c(m.$t(h.legend)), 1)) : o("", !0),
               h.icon ? (l(), v(t(O), {
                 key: 1,
                 name: h.icon,
@@ -1041,12 +1052,12 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
               i("label", {
                 for: t($)("button", e.fieldName + h.value).inputId,
                 class: "is-clickable"
-              }, c(m.$t(h.text)), 9, st)
-            ], 10, lt))), 128))
+              }, c(m.$t(h.text)), 9, at)
+            ], 10, et))), 128))
           ]),
           _: 1
         })
-      ], 8, tt),
+      ], 8, _e),
       e.errorMessage != null ? (l(), v(t(V), {
         key: 1,
         error: e.errorMessage,
@@ -1056,16 +1067,16 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
         key: 2,
         id: t(d),
         class: "help"
-      }, c(m.$t(a.help)), 9, nt)) : o("", !0)
+      }, c(m.$t(a.help)), 9, it)) : o("", !0)
     ], 2));
   }
-}, dt = {
+}, st = {
   key: 0,
   class: "control"
-}, ot = ["aria-label"], rt = ["aria-label"], ut = {
+}, nt = ["aria-label"], dt = ["aria-label"], ot = {
   key: 1,
   class: "control"
-}, pt = {
+}, It = {
   __name: "NavigationButton",
   props: {
     currentPageTitle: {
@@ -1099,40 +1110,40 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   },
   emits: ["closed", "goback", "canceled"],
   setup(e, { emit: n }) {
-    const a = ee(), y = e, b = B(() => "button" + (a.value === "dark" && y.isText == !1 && y.isCapture == !1 ? " is-dark" : "") + (y.isText == !0 ? " is-text" : "") + (y.isCapture == !0 ? " is-large is-warning" : "") + (y.isRounded == !0 ? " is-rounded" : ""));
-    return (d, r) => e.useLinkTag ? (l(), s("p", dt, [
+    const a = ee(), y = e, b = C(() => "button" + (a.value === "dark" && y.isText == !1 && y.isCapture == !1 ? " is-dark" : "") + (y.isText == !0 ? " is-text" : "") + (y.isCapture == !0 ? " is-large is-warning" : "") + (y.isRounded == !0 ? " is-rounded" : ""));
+    return (d, r) => e.useLinkTag ? (l(), s("p", st, [
       e.action == "close" ? (l(), s("a", {
         key: 0,
         id: "lnkClose",
-        onClick: r[0] || (r[0] = N((m) => d.$emit("closed"), ["prevent"])),
-        class: f(b.value),
+        onClick: r[0] || (r[0] = p((m) => d.$emit("closed"), ["prevent"])),
+        class: u(b.value),
         tabindex: "0",
         role: "button",
         "aria-label": d.$t("tooltip.close_the_x_page", { pagetitle: e.currentPageTitle })
-      }, c(d.$t("label.close")), 11, ot)) : e.action == "back" ? (l(), s("a", {
+      }, c(d.$t("label.close")), 11, nt)) : e.action == "back" ? (l(), s("a", {
         key: 1,
         id: "lnkBack",
-        onClick: r[1] || (r[1] = N((m) => d.$emit("goback"), ["prevent"])),
-        class: f(b.value),
+        onClick: r[1] || (r[1] = p((m) => d.$emit("goback"), ["prevent"])),
+        class: u(b.value),
         "aria-label": d.$t("tooltip.go_back_to_the_x_page", { pagetitle: e.previousPageTitle })
-      }, c(d.$t("label.back")), 11, rt)) : e.action == "cancel" ? (l(), s("a", {
+      }, c(d.$t("label.back")), 11, dt)) : e.action == "cancel" ? (l(), s("a", {
         key: 2,
         id: "lnkCancel",
-        onClick: r[2] || (r[2] = N((m) => d.$emit("canceled"), ["prevent"])),
-        class: f(b.value)
+        onClick: r[2] || (r[2] = p((m) => d.$emit("canceled"), ["prevent"])),
+        class: u(b.value)
       }, c(d.$t("label.cancel")), 3)) : o("", !0)
-    ])) : (l(), s("p", ut, [
+    ])) : (l(), s("p", ot, [
       e.action == "close" ? (l(), s("button", {
         key: 0,
         id: "btnClose",
-        class: f(b.value),
+        class: u(b.value),
         onClick: r[3] || (r[3] = (m) => d.$emit("closed")),
         type: "button"
       }, c(d.$t("label.close")), 3)) : o("", !0),
       e.action == "cancel" ? (l(), s("button", {
         key: 1,
         id: "btnCancel",
-        class: f(b.value),
+        class: u(b.value),
         onClick: r[4] || (r[4] = (m) => d.$emit("canceled")),
         type: "button"
       }, c(d.$t("label.cancel")), 3)) : o("", !0)
@@ -1140,15 +1151,15 @@ const se = { class: "field is-flex" }, ne = ["id", "name", "disabled", "aria-des
   }
 };
 export {
-  yt as FormButtons,
-  ht as FormCheckbox,
-  kt as FormField,
+  gt as FormButtons,
+  bt as FormCheckbox,
+  yt as FormField,
   V as FormFieldError,
-  vt as FormPasswordField,
-  $t as FormProtectedField,
-  St as FormSelect,
-  It as FormTextarea,
-  Lt as FormToggle,
-  pt as NavigationButton,
+  ht as FormPasswordField,
+  kt as FormProtectedField,
+  vt as FormSelect,
+  $t as FormTextarea,
+  St as FormToggle,
+  It as NavigationButton,
   q as VueButton
 };
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 7508d34..90aa355 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -1,11 +1,11 @@
-import { ref as k, computed as P, onMounted as j, createElementBlock as n, openBlock as t, normalizeClass as S, Fragment as U, renderList as ee, onUnmounted as te, resolveComponent as se, createBlock as O, withCtx as b, createCommentVNode as g, renderSlot as B, toDisplayString as y, inject as Y, unref as _, createElementVNode as l, createVNode as $, createTextVNode as L, mergeModels as V, useModel as q, watch as ve, resolveDynamicComponent as we, withModifiers as D, toValue as z, useTemplateRef as K, withDirectives as Z, withKeys as H, vShow as ce, nextTick as de, vModelText as be } from "vue";
-import { UseColorMode as oe } from "@vueuse/components";
-import { NavigationButton as fe } from "@2fauth/formcontrols";
-import { LucideMenu as Se, LucideX as xe, Slash as Ce, MonitorCheck as Te, List as Oe, Grid3X3 as Pe, Moon as Be, Sun as Ae, LucideLoaderCircle as W, LucideEye as Ne, LucideEyeOff as Le, LucideSearch as Me } from "lucide-vue-next";
-import { useNotification as ze } from "@kyvg/vue3-notification";
-import { useClipboard as De } from "@vueuse/core";
-import { createI18n as Ve } from "vue-i18n";
-const Ee = ["data-is-active"], Ie = {
+import { ref as x, computed as I, onMounted as ne, openBlock as t, createElementBlock as a, normalizeClass as c, Fragment as A, renderList as j, onUnmounted as he, resolveComponent as H, createBlock as O, withCtx as $, toDisplayString as p, createCommentVNode as f, renderSlot as T, useModel as G, unref as d, createElementVNode as i, withModifiers as z, createTextVNode as S, createVNode as h, mergeModels as F, watch as Ae, resolveDynamicComponent as Ue, inject as ee, toValue as K, useTemplateRef as te, withKeys as B, withDirectives as D, vShow as se, nextTick as $e, vModelText as Ee, Transition as U, vModelCheckbox as ue, normalizeStyle as _e } from "vue";
+import { LucideChevronDown as Ve, LucideStar as R, LucideUsers as oe, LucideUserCheck as ae, LucideAtSign as xe, LucideSquareSlash as ze, Info as Ke, ShieldUser as We, UsersRound as je, Settings as He, ScanFace as Qe, KeySquare as Xe, CircleUser as Je, SlidersHorizontal as Ye, Slash as Ze, MonitorCheck as et, List as tt, Grid3X3 as st, Moon as ot, Sun as at, LucideMenu as ce, LucideX as Pe, LucideLoaderCircle as W, LucideEye as de, LucideEyeOff as pe, LucideExternalLink as nt, LucideSearch as it, LucideCircleAlert as Se, LucideUserPlus as Ce, LucideUserPen as Oe, LucideQrCode as Me, LucideHistory as Te, LucideCircleEllipsis as lt, LucideCircleX as rt, LucideEllipsis as ut, LucideSquarePen as ct, LucideTrash2 as dt } from "@lucide/vue";
+import { UseColorMode as Q } from "@vueuse/components";
+import { NavigationButton as pt } from "@2fauth/formcontrols";
+import { useNotification as ft } from "@kyvg/vue3-notification";
+import { useClipboard as Le } from "@vueuse/core";
+import { createI18n as ht } from "vue-i18n";
+const vt = ["data-is-active"], yt = {
   __name: "Dots",
   props: {
     stepCount: {
@@ -25,30 +25,30 @@ const Ee = ["data-is-active"], Ie = {
       type: Boolean
     }
   },
-  setup(s, { expose: p }) {
-    const c = s, i = k(0), m = P(() => i.value == -1);
-    function v(e) {
-      i.value = e < c.stepCount ? e + 1 : 1;
+  setup(o, { expose: m }) {
+    const r = o, v = x(0), e = I(() => v.value == -1);
+    function k(n) {
+      v.value = n < r.stepCount ? n + 1 : 1;
     }
-    function u() {
-      i.value = -1;
+    function g() {
+      v.value = -1;
     }
-    return j(() => {
-      isNaN(c.initialIndex) || v(c.initialIndex);
-    }), p({
-      turnOn: v,
-      turnOff: u,
-      props: c
-    }), (e, o) => (t(), n("ul", {
-      class: S(["dots", { off: m.value, condensed: s.isCondensed }])
+    return ne(() => {
+      isNaN(r.initialIndex) || k(r.initialIndex);
+    }), m({
+      turnOn: k,
+      turnOff: g,
+      props: r
+    }), (n, l) => (t(), a("ul", {
+      class: c(["dots", { off: e.value, condensed: o.isCondensed }])
     }, [
-      (t(!0), n(U, null, ee(s.stepCount, (a) => (t(), n("li", {
-        key: a,
-        "data-is-active": a == i.value ? !0 : null
-      }, null, 8, Ee))), 128))
+      (t(!0), a(A, null, j(o.stepCount, (y) => (t(), a("li", {
+        key: y,
+        "data-is-active": y == v.value ? !0 : null
+      }, null, 8, vt))), 128))
     ], 2));
   }
-}, Fe = {
+}, mt = {
   __name: "DotsController",
   props: {
     step_count: {
@@ -66,41 +66,41 @@ const Ee = ["data-is-active"], Ie = {
     }
   },
   emits: ["stepping-started", "stepping-ended", "stepped-up"],
-  setup(s, { expose: p, emit: c }) {
-    const i = s, m = k(null), v = k(null), u = k(null), e = k(null), o = k(null), a = P(() => m.value % i.period), h = P(() => i.period - a.value), r = P(() => i.period / i.step_count), C = P(() => {
-      let A = a.value * i.step_count / i.period;
-      return Math.floor(A) + 0;
-    }), T = c, E = (A = 0) => {
-      w(), m.value = A != 0 ? A : i.generated_at, T("stepping-started", C.value), o.value = C.value, v.value = setTimeout(function() {
-        w(), T("stepping-ended");
-      }, h.value * 1e3);
-      let N = Math.ceil(a.value / r.value) * r.value - a.value;
-      u.value = setTimeout(function() {
-        N > 0 && (o.value += 1, T("stepped-up", o.value)), e.value = setInterval(function() {
-          o.value += 1, T("stepped-up", o.value);
-        }, r.value * 1e3);
-      }, N * 1e3);
-    }, w = () => {
-      clearTimeout(v.value), clearTimeout(u.value), clearInterval(e.value), o.value = m.value = null;
+  setup(o, { expose: m, emit: r }) {
+    const v = o, e = x(null), k = x(null), g = x(null), n = x(null), l = x(null), y = I(() => e.value % v.period), b = I(() => v.period - y.value), s = I(() => v.period / v.step_count), u = I(() => {
+      let N = y.value * v.step_count / v.period;
+      return Math.floor(N) + 0;
+    }), M = r, w = (N = 0) => {
+      L(), e.value = N != 0 ? N : v.generated_at, M("stepping-started", u.value), l.value = u.value, k.value = setTimeout(function() {
+        L(), M("stepping-ended");
+      }, b.value * 1e3);
+      let q = Math.ceil(y.value / s.value) * s.value - y.value;
+      g.value = setTimeout(function() {
+        q > 0 && (l.value += 1, M("stepped-up", l.value)), n.value = setInterval(function() {
+          l.value += 1, M("stepped-up", l.value);
+        }, s.value * 1e3);
+      }, q * 1e3);
+    }, L = () => {
+      clearTimeout(k.value), clearTimeout(g.value), clearInterval(n.value), l.value = e.value = null;
     };
-    return j(() => {
-      i.autostart == !0 && E();
-    }), te(() => {
-      w();
-    }), p({
-      startStepping: E,
-      reset: w,
-      props: i
-    }), (A, N) => (t(), n("div"));
+    return ne(() => {
+      v.autostart == !0 && w();
+    }), he(() => {
+      L();
+    }), m({
+      startStepping: w,
+      reset: L,
+      props: v
+    }), (N, q) => (t(), a("div"));
   }
-}, Re = {
+}, kt = {
   key: 0,
-  class: "title has-text-grey-dark"
-}, Ge = {
+  class: "title"
+}, gt = {
   key: 1,
   id: "punchline",
   class: "block"
-}, ys = {
+}, ba = {
   __name: "FormWrapper",
   props: {
     title: {
@@ -112,62 +112,458 @@ const Ee = ["data-is-active"], Ie = {
       default: ""
     }
   },
-  setup(s) {
-    return (p, c) => {
-      const i = se("ResponsiveWidthWrapper");
-      return t(), O(i, null, {
-        default: b(() => [
-          s.title ? (t(), n("h1", Re, y(p.$t(s.title)), 1)) : g("", !0),
-          s.punchline ? (t(), n("div", Ge, y(p.$t(s.punchline)), 1)) : g("", !0),
-          B(p.$slots, "default")
+  setup(o) {
+    return (m, r) => {
+      const v = H("ResponsiveWidthWrapper");
+      return t(), O(v, null, {
+        default: $(() => [
+          o.title ? (t(), a("h1", kt, p(m.$t(o.title)), 1)) : f("", !0),
+          o.punchline ? (t(), a("div", gt, p(m.$t(o.punchline)), 1)) : f("", !0),
+          T(m.$slots, "default")
         ]),
         _: 3
       });
     };
   }
-}, We = {
+}, bt = ["title"], wa = {
+  __name: "GroupCallToSwitch",
+  props: /* @__PURE__ */ F({
+    currentGroup: {
+      type: String,
+      default: null
+    },
+    activeGroup: {
+      type: Number,
+      default: 0
+    },
+    filteredCount: {
+      type: Number,
+      default: null
+    },
+    useShare: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    showGroupSwitch: {},
+    showGroupSwitchModifiers: {}
+  }),
+  emits: ["update:showGroupSwitch"],
+  setup(o) {
+    const m = G(o, "showGroupSwitch");
+    return (r, v) => (t(), O(d(Q), null, {
+      default: $(({ mode: e }) => [
+        i("button", {
+          type: "button",
+          id: "btnShowGroupSwitch",
+          title: r.$t("tooltip.show_group_selector"),
+          tabindex: "1",
+          class: c(["button is-text is-like-text has-text-grey-dark", { "has-text-grey": e != "dark" }]),
+          onClick: v[0] || (v[0] = z((k) => m.value = !m.value, ["stop"]))
+        }, [
+          parseInt(o.activeGroup) == -1 ? (t(), a(A, { key: 0 }, [
+            S(p(r.$t("label.group_less")) + " (" + p(o.filteredCount) + ")  ", 1)
+          ], 64)) : o.useShare && parseInt(o.activeGroup) == -2 ? (t(), a(A, { key: 1 }, [
+            S(p(r.$t("label.shared_by_me")) + " (" + p(o.filteredCount) + ")  ", 1)
+          ], 64)) : o.useShare && parseInt(o.activeGroup) == -3 ? (t(), a(A, { key: 2 }, [
+            S(p(r.$t("label.shared_with_me")) + " (" + p(o.filteredCount) + ")  ", 1)
+          ], 64)) : o.currentGroup ? (t(), a(A, { key: 3 }, [
+            S(p(o.currentGroup) + " (" + p(o.filteredCount) + ")  ", 1)
+          ], 64)) : (t(), a(A, { key: 4 }, [
+            S(p(r.$t("label.all")) + " (" + p(o.filteredCount) + ")  ", 1)
+          ], 64)),
+          h(d(Ve), { class: "mt-1" })
+        ], 10, bt)
+      ]),
+      _: 1
+    }));
+  }
+}, wt = ["title"], $t = ["title"], _t = ["onClick"], St = { class: "chip-label mr-1" }, Ct = ["title"], Ot = ["title"], Mt = ["title"], $a = {
+  __name: "GroupChips",
+  props: /* @__PURE__ */ F({
+    groups: Array,
+    filteredCount: {
+      type: Number,
+      default: null
+    },
+    useVirtualChips: {
+      type: Boolean,
+      default: !1
+    },
+    useShare: {
+      type: Boolean,
+      default: !1
+    },
+    useShareAllScope: {
+      type: Boolean,
+      default: !1
+    },
+    useFavorites: {
+      type: Boolean,
+      default: !1
+    },
+    isRightAligned: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    activeGroup: {},
+    activeGroupModifiers: {},
+    showGroupSwitch: {},
+    showGroupSwitchModifiers: {},
+    showFavoritesOnly: {},
+    showFavoritesOnlyModifiers: {}
+  }),
+  emits: /* @__PURE__ */ F([
+    "active-group-changed"
+  ], ["update:activeGroup", "update:showGroupSwitch", "update:showFavoritesOnly"]),
+  setup(o, { emit: m }) {
+    const r = G(o, "activeGroup"), v = G(o, "showGroupSwitch"), e = G(o, "showFavoritesOnly"), k = o, g = m;
+    function n(l) {
+      r.value = l, g("active-group-changed", l);
+    }
+    return (l, y) => (t(), a("div", {
+      id: "groupChips",
+      class: c(["mx-3 tags", k.isRightAligned ? "is-justify-content-right" : "is-justify-content-center"])
+    }, [
+      h(d(Q), null, {
+        default: $(({ mode: b }) => [
+          i("button", {
+            class: c(["button tag", { "is-white": b != "dark", "has-text-grey": r.value != 0 }]),
+            onClick: y[0] || (y[0] = (s) => n(-0)),
+            title: l.$t("label.all_accounts")
+          }, p(l.$t("label.all")) + p(r.value == 0 ? ` • ${o.filteredCount}` : ""), 11, wt),
+          o.useFavorites ? (t(), a("button", {
+            key: 0,
+            class: c(["button tag", { "has-text-grey": b == "dark", "is-white has-text-grey": b != "dark" }]),
+            onClick: y[1] || (y[1] = (s) => e.value = !e.value),
+            title: l.$t("tooltip.show_favorites_only")
+          }, [
+            e.value ? (t(), O(d(R), {
+              key: 0,
+              class: c(["icon-size-0-9", b == "dark" ? "has-text-warning-dark-invert" : "has-text-grey"]),
+              fill: "#ffb400"
+            }, null, 8, ["class"])) : (t(), O(d(R), {
+              key: 1,
+              class: "icon-size-0-9"
+            }))
+          ], 10, $t)) : f("", !0),
+          (t(!0), a(A, null, j(o.groups, (s) => (t(), a(A, {
+            key: s.id
+          }, [
+            s.id != 0 && s.show_in_chips || r.value > 0 && s.id == r.value && s.show_in_chips != !0 ? (t(), a("button", {
+              key: 0,
+              class: c(["button tag", { "has-text-grey": b == "dark" && r.value != s.id, "is-white has-text-grey": b != "dark" && r.value != s.id, "is-link": r.value == s.id }]),
+              onClick: (u) => n(s.id)
+            }, [
+              i("span", St, p(s.name), 1),
+              S(p(r.value == s.id ? `• ${o.filteredCount}` : ""), 1)
+            ], 10, _t)) : f("", !0)
+          ], 64))), 128)),
+          i("button", {
+            class: c(["button tag has-text-grey", b == "dark" ? "" : "is-white"]),
+            onClick: y[2] || (y[2] = (s) => v.value = !0)
+          }, " ... ", 2),
+          o.useVirtualChips ? (t(), a(A, { key: 1 }, [
+            o.useShare ? (t(), a("button", {
+              key: 0,
+              class: c(["button tag", { "has-text-grey": b == "dark" && r.value != -2, "is-white has-text-grey": b != "dark" && r.value != -2, "is-link": r.value == -2 }]),
+              onClick: y[3] || (y[3] = (s) => n(-2)),
+              title: l.$t("label.accounts_I_m_sharing")
+            }, [
+              o.useShareAllScope ? (t(), a(A, { key: 0 }, [
+                h(d(oe), { class: "icon-size-0-9 mr-1" }),
+                y[6] || (y[6] = S("| ", -1))
+              ], 64)) : f("", !0),
+              h(d(ae), {
+                class: c(["ml-1 icon-size-0-9", { "mr-1": r.value == -2 }])
+              }, null, 8, ["class"]),
+              S(p(r.value == -2 ? `• ${o.filteredCount}` : ""), 1)
+            ], 10, Ct)) : f("", !0),
+            o.useShare ? (t(), a("button", {
+              key: 1,
+              class: c(["button tag", { "has-text-grey": b == "dark" && r.value != -3, "is-white has-text-grey": b != "dark" && r.value != -3, "is-link": r.value == -3 }]),
+              onClick: y[4] || (y[4] = (s) => n(-3)),
+              title: l.$t("label.accounts_shared_with_me")
+            }, [
+              h(d(xe), {
+                class: c(["icon-size-0-9", { "mr-1": r.value == -3 }])
+              }, null, 8, ["class"]),
+              S(p(r.value == -3 ? `• ${o.filteredCount}` : ""), 1)
+            ], 10, Ot)) : f("", !0),
+            i("button", {
+              class: c(["button tag", { "has-text-grey": b == "dark" && r.value != -1, "is-white has-text-grey": b != "dark" && r.value != -1, "is-link": r.value == -1 }]),
+              onClick: y[5] || (y[5] = (s) => n(-1)),
+              title: l.$t("label.group_less_accounts")
+            }, [
+              h(d(ze), {
+                class: c(["icon-size-1", { "mr-1": r.value == -1 }])
+              }, null, 8, ["class"]),
+              S(p(r.value == -1 ? `• ${o.filteredCount}` : ""), 1)
+            ], 10, Mt)
+          ], 64)) : f("", !0)
+        ]),
+        _: 1
+      })
+    ], 2));
+  }
+}, Tt = {
   key: 0,
-  class: "main"
-}, Ke = {
+  id: "groupSwitch"
+}, At = { class: "columns is-centered m-0" }, xt = { class: "column is-half-tablet is-one-third-desktop is-one-quarter-widescreen is-one-quarter-fullhd" }, zt = { class: "columns is-multiline m-0" }, Pt = { class: "column is-full" }, Lt = {
   key: 0,
-  class: "columns is-gapless"
-}, Ue = { class: "column has-text-centered" }, qe = { class: "field is-grouped" }, He = {
+  class: "column is-full"
+}, Bt = { class: "ml-2 button tag" }, It = {
   key: 1,
-  class: "content has-text-centered"
-}, je = {
+  class: "column is-full"
+}, Gt = { class: "ml-2 button tag" }, Ft = {
+  key: 2,
+  class: "column is-full"
+}, Dt = { class: "ml-2 button tag" }, Rt = {
+  key: 3,
+  class: "column has-text-centered"
+}, Nt = {
   key: 0,
-  class: "columns is-gapless"
-}, Xe = { class: "column has-text-centered" }, Je = { class: "field is-grouped" }, Qe = { class: "content has-text-centered" }, Ye = { key: 0 }, Ze = {
+  class: "column is-full"
+}, qt = ["onClick"], Ut = {
   key: 0,
-  class: "has-text-weight-bold"
-}, et = {
-  key: 1,
-  class: ""
-}, tt = { key: 1 }, st = { key: 1 }, ot = { key: 0 }, nt = {
+  class: "columns is-centered mt-0"
+}, Et = { class: "column has-text-centered" }, _a = {
+  __name: "GroupSwitch",
+  props: /* @__PURE__ */ F({
+    groups: Array,
+    useShare: {
+      type: Boolean,
+      default: !1
+    },
+    useShareAllScope: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    activeGroup: {},
+    activeGroupModifiers: {},
+    isVisible: {},
+    isVisibleModifiers: {}
+  }),
+  emits: /* @__PURE__ */ F(["active-group-changed"], ["update:activeGroup", "update:isVisible"]),
+  setup(o, { emit: m }) {
+    const r = G(o, "activeGroup"), v = G(o, "isVisible"), e = m;
+    function k(g) {
+      v.value = !1, r.value = g, e("active-group-changed", g);
+    }
+    return (g, n) => {
+      const l = H("StackLayout");
+      return v.value ? (t(), a("div", Tt, [
+        h(l, { "should-grow": !1 }, {
+          content: $(() => [
+            i("div", At, [
+              i("div", xt, [
+                i("div", zt, [
+                  h(d(Q), null, {
+                    default: $(({ mode: y }) => [
+                      i("div", Pt, [
+                        i("button", {
+                          type: "button",
+                          class: c(["button is-fullwidth", { "is-dark has-text-light is-outlined": y == "dark" }]),
+                          onClick: n[0] || (n[0] = (b) => k(0))
+                        }, p(g.$t("label.all_accounts")), 3)
+                      ]),
+                      o.groups.length > 1 ? (t(), a("div", Lt, [
+                        i("button", {
+                          type: "button",
+                          class: c(["button is-fullwidth", { "is-dark has-text-light is-outlined": y == "dark" }]),
+                          onClick: n[1] || (n[1] = (b) => k(-1))
+                        }, [
+                          S(p(g.$t("label.group_less_accounts")), 1),
+                          i("span", Bt, [
+                            h(d(ze), { class: "icon-size-1 has-text-grey" })
+                          ])
+                        ], 2)
+                      ])) : f("", !0),
+                      o.useShare ? (t(), a("div", It, [
+                        i("button", {
+                          type: "button",
+                          class: c(["button is-fullwidth", { "is-dark has-text-light is-outlined": y == "dark" }]),
+                          onClick: n[2] || (n[2] = (b) => k(-2))
+                        }, [
+                          S(p(g.$t("label.accounts_I_m_sharing")), 1),
+                          i("span", Gt, [
+                            o.useShareAllScope ? (t(), a(A, { key: 0 }, [
+                              h(d(oe), { class: "icon-size-1 mr-1 has-text-grey" }),
+                              n[4] || (n[4] = S("| ", -1))
+                            ], 64)) : f("", !0),
+                            h(d(ae), {
+                              class: c(["icon-size-1 has-text-grey", { "ml-1": o.useShareAllScope }])
+                            }, null, 8, ["class"])
+                          ])
+                        ], 2)
+                      ])) : f("", !0),
+                      o.useShare ? (t(), a("div", Ft, [
+                        i("button", {
+                          type: "button",
+                          class: c(["button is-fullwidth", { "is-dark has-text-light is-outlined": y == "dark" }]),
+                          onClick: n[3] || (n[3] = (b) => k(-3))
+                        }, [
+                          S(p(g.$t("label.accounts_shared_with_me")), 1),
+                          i("span", Dt, [
+                            h(d(xe), { class: "icon-size-1 has-text-grey" })
+                          ])
+                        ], 2)
+                      ])) : f("", !0),
+                      o.groups.length > 1 ? (t(), a("div", Rt, p(g.$t("message.or_filter_by_group")), 1)) : f("", !0),
+                      (t(!0), a(A, null, j(o.groups, (b) => (t(), a(A, {
+                        key: b.id
+                      }, [
+                        b.id > 0 ? (t(), a("div", Nt, [
+                          i("button", {
+                            type: "button",
+                            class: c(["button is-fullwidth", { "is-dark has-text-light is-outlined": y == "dark" }]),
+                            onClick: (s) => k(b.id)
+                          }, p(b.name), 11, qt)
+                        ])) : f("", !0)
+                      ], 64))), 128))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                g.$slots.default ? (t(), a("div", Ut, [
+                  i("div", Et, [
+                    T(g.$slots, "default")
+                  ])
+                ])) : f("", !0)
+              ])
+            ])
+          ]),
+          _: 3
+        })
+      ])) : f("", !0);
+    };
+  }
+}, Sa = {
+  __name: "Kicker",
+  props: {
+    kickAfter: {
+      type: Number,
+      required: !0
+    }
+  },
+  emits: ["kicked"],
+  setup(o, { emit: m }) {
+    const r = m, v = x(["mousedown", "scroll", "keypress"]), e = x(null), k = o;
+    Ae(
+      () => k.kickAfter,
+      () => {
+        l();
+      }
+    ), ne(() => {
+      v.value.forEach(function(b) {
+        window.addEventListener(b, l);
+      }, this), g();
+    }), he(() => {
+      v.value.forEach(function(b) {
+        window.removeEventListener(b, l);
+      }, this), y();
+    });
+    function g() {
+      e.value = setTimeout(n, k.kickAfter * 60 * 1e3);
+    }
+    async function n() {
+      clearTimeout(e.value), r("kicked");
+    }
+    function l() {
+      y(), g();
+    }
+    function y() {
+      clearTimeout(e.value);
+    }
+    return () => {
+    };
+  }
+}, Vt = {
+  __name: "LucideGenericIcon",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    size: Number,
+    color: String,
+    strokeWidth: Number,
+    defaultClass: String
+  },
+  setup(o) {
+    const m = { Sun: at, Moon: ot, Grid3X3: st, List: tt, MonitorCheck: et, Slash: Ze, SlidersHorizontal: Ye, CircleUser: Je, KeySquare: Xe, ScanFace: Qe, Settings: He, UsersRound: je, ShieldUser: We, Info: Ke }, r = o, v = I(() => m[r.name]);
+    return (e, k) => (t(), O(Ue(v.value), {
+      size: o.size,
+      color: o.color,
+      "stroke-width": o.strokeWidth,
+      "default-class": o.defaultClass
+    }, null, 8, ["size", "color", "stroke-width", "default-class"]));
+  }
+}, Be = () => {
+  const { notify: o } = ft();
+  return {
+    info: (n) => {
+      o({ type: "is-info", ...n });
+    },
+    success: (n) => {
+      o({ type: "is-success", ...n });
+    },
+    warn: (n) => {
+      o({ type: "is-warning", ...n });
+    },
+    alert: (n) => {
+      o({ type: "is-danger", ...n });
+    },
+    action: (n) => {
+      o({ type: "is-dark", ...n });
+    },
+    clear: () => {
+      o({ clean: !0 });
+    }
+  };
+}, Kt = {
   key: 0,
-  class: "release-flag"
-}, at = { key: 1 }, it = { key: 2 }, lt = {
+  class: "columns is-gapless mb-3"
+}, Wt = { class: "column has-text-centered" }, jt = { class: "field is-grouped" }, Ht = { class: "content has-text-centered" }, Qt = {
   key: 0,
-  class: "ml-0 mt-1"
-}, rt = { class: "column" }, ut = {
+  class: "columns is-gapless"
+}, Xt = { class: "column has-text-centered" }, Jt = ["inert"], Yt = {
+  key: 1,
+  class: "submenu content has-text-centered mb-4"
+}, Zt = { class: "ml-0 mt-1" }, es = { class: "column" }, ts = {
   key: 0,
   class: "column"
-}, ct = {
+}, ss = {
   key: 0,
   class: "release-flag"
-}, dt = {
+}, os = {
   key: 1,
   class: "column"
-}, pt = {
+}, as = { class: "content has-text-centered" }, ns = { key: 0 }, is = {
+  key: 0,
+  class: "has-text-weight-bold"
+}, ls = {
+  key: 1,
+  class: ""
+}, rs = { key: 1 }, us = { key: 1 }, cs = { key: 0 }, ds = {
   key: 0,
   class: "release-flag"
-}, vt = { class: "mx-2 has-ellipsis" }, me = {
-  __name: "VueFooter",
-  setup(s) {
-    const p = Y("appSettingsStore", {
+}, ps = { key: 1 }, fs = { key: 2 }, hs = { class: "mr-2 has-ellipsis" }, fe = {
+  __name: "VueFooterContent",
+  props: {
+    showMenu: {},
+    showMenuModifiers: {}
+  },
+  emits: ["update:showMenu"],
+  setup(o) {
+    const m = G(o, "showMenu");
+    m.value = !1;
+    const r = ee("appSettingsStore", {
       latestRelease: null,
       checkForUpdate: !0
-    }), c = Y("userStore", {
+    }), v = ee("userStore", {
       isAdmin: !1,
       isAuthenticated: !1,
       email: null,
@@ -176,424 +572,261 @@ const Ee = ["data-is-active"], Ie = {
       },
       logout: function() {
       }
-    }), i = Y("2fauth", {
+    }), e = ee("2fauth", {
       context: "webapp",
       version: "x.y.z",
       config: {
         proxyAuth: !1,
         proxyLogoutUrl: null
       }
-    }), m = k(!1), v = P(() => p.latestRelease && p.checkForUpdate), u = P(() => !i.config.proxyAuth || i.config.proxyAuth && i.config.proxyLogoutUrl);
-    function e(o) {
-      confirm(o) && c.logout();
+    }), k = I(() => r.latestRelease && r.checkForUpdate), g = I(() => !e.config.proxyAuth || e.config.proxyAuth && e.config.proxyLogoutUrl);
+    function n(l) {
+      confirm(l) && v.logout();
     }
-    return (o, a) => {
-      const h = se("router-link");
-      return _(i).context == "webext" ? (t(), n("footer", We, [
-        o.$slots.default ? (t(), n("div", Ke, [
-          l("div", Ue, [
-            l("div", qe, [
-              B(o.$slots, "default")
+    return (l, y) => {
+      const b = H("router-link");
+      return d(e).context == "webext" ? (t(), a(A, { key: 0 }, [
+        l.$slots.default ? (t(), a("div", Kt, [
+          i("div", Wt, [
+            i("div", jt, [
+              T(l.$slots, "default")
             ])
           ])
-        ])) : (t(), n("div", He, [
-          B(o.$slots, "default")
-        ]))
-      ])) : _(i).context == "webapp" ? (t(), n("footer", {
-        key: 1,
-        class: S(["main", { menu: m.value }])
-      }, [
-        o.$slots.default && !m.value ? (t(), n("div", je, [
-          l("div", Xe, [
-            l("div", Je, [
-              B(o.$slots, "default")
+        ])) : f("", !0),
+        i("div", Ht, [
+          T(l.$slots, "subpart")
+        ])
+      ], 64)) : d(e).context == "webapp" ? (t(), a(A, { key: 1 }, [
+        l.$slots.default ? (t(), a("div", Qt, [
+          i("div", Xt, [
+            i("div", {
+              class: "field is-grouped",
+              inert: m.value
+            }, [
+              T(l.$slots, "default")
+            ], 8, Jt)
+          ])
+        ])) : f("", !0),
+        m.value ? (t(), a("div", Yt, [
+          T(l.$slots, "submenu", {}, () => [
+            i("ul", Zt, [
+              i("li", es, [
+                h(b, {
+                  id: "lnkSettings",
+                  to: { name: "settings.options" },
+                  class: "is-link"
+                }, {
+                  default: $(() => [
+                    S(p(l.$t("link.settings")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              d(v).isAdmin ? (t(), a("li", ts, [
+                h(b, {
+                  id: "lnkAdmin",
+                  to: { name: "admin.appSetup" },
+                  class: "is-link"
+                }, {
+                  default: $(() => [
+                    k.value ? (t(), a("span", ss)) : f("", !0),
+                    S(" " + p(l.$t("link.admin_panel")), 1)
+                  ]),
+                  _: 1
+                })
+              ])) : f("", !0),
+              g.value ? (t(), a("li", os, [
+                h(d(Q), null, {
+                  default: $(({ mode: s }) => [
+                    i("button", {
+                      type: "button",
+                      id: "lnkSignOut",
+                      class: c(["button is-text is-like-text", s == "dark" ? "has-text-grey-lighter" : "has-text-grey-darker"]),
+                      onClick: y[0] || (y[0] = (u) => n(l.$t("confirmation.logout")))
+                    }, p(l.$t("label.sign_out")), 3)
+                  ]),
+                  _: 1
+                })
+              ])) : f("", !0)
             ])
           ])
-        ])) : g("", !0),
-        l("div", Qe, [
-          B(o.$slots, "subpart", {}, () => [
-            o.$route.meta.showAbout === !0 ? (t(), n("div", Ye, [
-              o.$route.name != "about" ? (t(), O(h, {
+        ])) : f("", !0),
+        i("div", as, [
+          T(l.$slots, "subpart", {}, () => [
+            l.$route.meta.showAbout === !0 ? (t(), a("div", ns, [
+              l.$route.name != "about" ? (t(), O(b, {
                 key: 0,
                 id: "lnkAbout",
                 to: { name: "about" },
                 class: "has-text-grey"
               }, {
-                default: b(() => [
-                  _(c).isAuthenticated && o.$route.meta.watchedByKicker ? (t(), n("span", Ze, "2FAuth – v" + y(_(i).version), 1)) : (t(), n("span", et, y(o.$t("link.about")), 1))
+                default: $(() => [
+                  d(v).isAuthenticated && l.$route.meta.watchedByKicker ? (t(), a("span", is, "2FAuth – v" + p(d(e).version), 1)) : (t(), a("span", ls, p(l.$t("link.about")), 1))
                 ]),
                 _: 1
-              })) : (t(), n("span", tt, " "))
-            ])) : _(c).preferences.showEmailInFooter == !1 ? (t(), n("div", st, [
-              $(h, {
+              })) : (t(), a("span", rs, " "))
+            ])) : d(v).preferences.showEmailInFooter == !1 ? (t(), a("div", us, [
+              h(b, {
                 id: "lnkSettings",
                 to: { name: "settings.options" },
                 class: "has-text-grey"
               }, {
-                default: b(() => [
-                  L(y(o.$t("link.settings")), 1)
+                default: $(() => [
+                  S(p(l.$t("link.settings")), 1)
                 ]),
                 _: 1
               }),
-              _(c).isAdmin ? (t(), n("span", ot, [
-                a[3] || (a[3] = L(" - ")),
-                $(h, {
+              d(v).isAdmin ? (t(), a("span", cs, [
+                y[3] || (y[3] = S(" - ", -1)),
+                h(b, {
                   id: "lnkAdmin",
                   to: { name: "admin.appSetup" },
                   class: "has-text-grey"
                 }, {
-                  default: b(() => [
-                    L(y(o.$t("link.admin_panel")), 1),
-                    v.value ? (t(), n("span", nt)) : g("", !0)
+                  default: $(() => [
+                    S(p(l.$t("link.admin_panel")), 1),
+                    k.value ? (t(), a("span", ds)) : f("", !0)
                   ]),
                   _: 1
                 })
-              ])) : g("", !0),
-              u.value ? (t(), n("span", at, [
-                a[4] || (a[4] = L(" - ")),
-                l("button", {
+              ])) : f("", !0),
+              g.value ? (t(), a("span", ps, [
+                y[4] || (y[4] = S(" - ", -1)),
+                i("button", {
                   type: "button",
                   id: "lnkSignOut",
                   class: "button is-text is-like-text has-text-grey",
-                  onClick: a[0] || (a[0] = (r) => e(o.$t("confirmation.logout")))
-                }, y(o.$t("label.sign_out")), 1)
-              ])) : g("", !0)
-            ])) : (t(), n("div", it, [
-              m.value == !0 ? (t(), n("ul", lt, [
-                l("li", rt, [
-                  $(h, {
-                    id: "lnkSettings",
-                    to: { name: "settings.options" }
-                  }, {
-                    default: b(() => [
-                      L(y(o.$t("link.settings")), 1)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _(c).isAdmin ? (t(), n("li", ut, [
-                  $(h, {
-                    id: "lnkAdmin",
-                    to: { name: "admin.appSetup" }
-                  }, {
-                    default: b(() => [
-                      v.value ? (t(), n("span", ct)) : g("", !0),
-                      L(" " + y(o.$t("link.admin_panel")), 1)
-                    ]),
-                    _: 1
-                  })
-                ])) : g("", !0),
-                u.value ? (t(), n("li", dt, [
-                  $(_(oe), null, {
-                    default: b(({ mode: r }) => [
-                      l("button", {
-                        type: "button",
-                        id: "lnkSignOut",
-                        class: S(["button is-text is-like-text", r == "dark" ? "has-text-grey-lighter" : "has-text-grey-darker"]),
-                        onClick: a[1] || (a[1] = (C) => e(o.$t("confirmation.logout")))
-                      }, y(o.$t("label.sign_out")), 3)
-                    ]),
-                    _: 1
-                  })
-                ])) : g("", !0)
-              ])) : g("", !0),
-              l("button", {
+                  onClick: y[1] || (y[1] = (s) => n(l.$t("confirmation.logout")))
+                }, p(l.$t("label.sign_out")), 1)
+              ])) : f("", !0)
+            ])) : (t(), a("div", fs, [
+              i("button", {
                 type: "button",
                 id: "btnEmailMenu",
-                onClick: a[2] || (a[2] = (r) => m.value = !m.value),
+                onClick: y[2] || (y[2] = (s) => m.value = !m.value),
                 class: "button is-text is-like-text has-text-grey",
                 style: { width: "100%" }
               }, [
-                _(c).isAdmin && v.value ? (t(), n("span", pt)) : g("", !0),
-                l("span", vt, y(_(c).email), 1),
-                m.value ? (t(), O(_(xe), {
-                  key: 2,
-                  class: "mr-2"
-                })) : (t(), O(_(Se), {
-                  key: 1,
-                  class: "mr-2"
-                }))
+                i("span", hs, p(d(v).email), 1),
+                m.value ? (t(), O(d(Pe), { key: 1 })) : (t(), O(d(ce), { key: 0 }))
               ])
             ]))
           ])
         ])
-      ], 2)) : g("", !0);
-    };
-  }
-}, ft = {
-  key: 0,
-  id: "groupSwitch",
-  class: "container groups"
-}, mt = { class: "columns is-centered" }, ht = { class: "column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd" }, yt = { class: "columns is-multiline" }, _t = { class: "column is-full" }, gt = { class: "column is-full" }, kt = { class: "column has-text-centered" }, $t = {
-  key: 0,
-  class: "column is-full"
-}, wt = ["onClick"], bt = {
-  key: 0,
-  class: "columns is-centered"
-}, St = { class: "column has-text-centered" }, _s = {
-  __name: "GroupSwitch",
-  props: /* @__PURE__ */ V({
-    groups: Array
-  }, {
-    activeGroup: {},
-    activeGroupModifiers: {},
-    isVisible: {},
-    isVisibleModifiers: {}
-  }),
-  emits: /* @__PURE__ */ V(["active-group-changed"], ["update:activeGroup", "update:isVisible"]),
-  setup(s, { emit: p }) {
-    const c = q(s, "activeGroup"), i = q(s, "isVisible"), m = p;
-    function v(u) {
-      i.value = !1, u > -1 ? (c.value = u, m("active-group-changed", u)) : m("show-group-less", u);
-    }
-    return (u, e) => i.value ? (t(), n("div", ft, [
-      l("div", mt, [
-        l("div", ht, [
-          l("div", yt, [
-            $(_(oe), null, {
-              default: b(({ mode: o }) => [
-                l("div", _t, [
-                  l("button", {
-                    type: "button",
-                    class: S(["button is-fullwidth", { "is-dark has-text-light is-outlined": o == "dark" }]),
-                    onClick: e[0] || (e[0] = (a) => v(0))
-                  }, y(u.$t("label.all_accounts")), 3)
-                ]),
-                l("div", gt, [
-                  l("button", {
-                    type: "button",
-                    class: S(["button is-fullwidth", { "is-dark has-text-light is-outlined": o == "dark" }]),
-                    onClick: e[1] || (e[1] = (a) => v(-1))
-                  }, y(u.$t("label.group_less_accounts")), 3)
-                ]),
-                l("div", kt, y(u.$t("message.or_filter_by_group")), 1),
-                (t(!0), n(U, null, ee(s.groups, (a) => (t(), n(U, {
-                  key: a.id
-                }, [
-                  a.id > 0 ? (t(), n("div", $t, [
-                    l("button", {
-                      type: "button",
-                      class: S(["button is-fullwidth", { "is-dark has-text-light is-outlined": o == "dark" }]),
-                      onClick: (h) => v(a.id)
-                    }, y(a.name), 11, wt)
-                  ])) : g("", !0)
-                ], 64))), 128))
-              ]),
-              _: 1
-            })
-          ]),
-          u.$slots.default ? (t(), n("div", bt, [
-            l("div", St, [
-              B(u.$slots, "default")
-            ])
-          ])) : g("", !0)
-        ])
-      ]),
-      $(me, { "show-buttons": !0 }, {
-        default: b(() => [
-          $(_(fe), {
-            action: "close",
-            "use-link-tag": !1,
-            onClosed: e[2] || (e[2] = (o) => i.value = !1)
-          })
-        ]),
-        _: 1
-      })
-    ])) : g("", !0);
-  }
-}, gs = {
-  __name: "Kicker",
-  props: {
-    kickAfter: {
-      type: Number,
-      required: !0
-    }
-  },
-  emits: ["kicked"],
-  setup(s, { emit: p }) {
-    const c = p, i = k(["mousedown", "scroll", "keypress"]), m = k(null), v = s;
-    ve(
-      () => v.kickAfter,
-      () => {
-        o();
-      }
-    ), j(() => {
-      i.value.forEach(function(h) {
-        window.addEventListener(h, o);
-      }, this), u();
-    }), te(() => {
-      i.value.forEach(function(h) {
-        window.removeEventListener(h, o);
-      }, this), a();
-    });
-    function u() {
-      m.value = setTimeout(e, v.kickAfter * 60 * 1e3);
-    }
-    async function e() {
-      clearTimeout(m.value), c("kicked");
-    }
-    function o() {
-      a(), u();
-    }
-    function a() {
-      clearTimeout(m.value);
-    }
-    return () => {
+      ], 64)) : f("", !0);
     };
   }
-}, ks = {
-  __name: "LucideGenericIcon",
-  props: {
-    name: {
-      type: String,
-      required: !0
-    },
-    size: Number,
-    color: String,
-    strokeWidth: Number,
-    defaultClass: String
-  },
-  setup(s) {
-    const p = { Sun: Ae, Moon: Be, Grid3X3: Pe, List: Oe, MonitorCheck: Te, Slash: Ce }, c = s, i = P(() => p[c.name]);
-    return (m, v) => (t(), O(we(i.value), {
-      size: s.size,
-      color: s.color,
-      "stroke-width": s.strokeWidth,
-      "default-class": s.defaultClass
-    }, null, 8, ["size", "color", "stroke-width", "default-class"]));
-  }
-}, xt = () => {
-  const { notify: s } = ze();
-  return {
-    info: (e) => {
-      s({ type: "is-info", ...e });
-    },
-    success: (e) => {
-      s({ type: "is-success", ...e });
-    },
-    warn: (e) => {
-      s({ type: "is-warning", ...e });
-    },
-    alert: (e) => {
-      s({ type: "is-danger", ...e });
-    },
-    action: (e) => {
-      s({ type: "is-dark", ...e });
-    },
-    clear: () => {
-      s({ clean: !0 });
-    }
-  };
-}, Ct = {
-  key: 0,
-  class: "modal-content modal-with-footer"
-}, Tt = { class: "modal-slot p-4 has-text-centered" }, Ot = {
-  key: 1,
-  class: "modal-content modal-with-footer"
-}, Pt = { class: "section" }, Bt = { class: "columns is-centered" }, At = { class: "column is-three-quarters" }, Nt = { class: "modal-slot has-text-centered is-shadowless" }, Lt = { key: 1 }, $s = {
+}, vs = { class: "modal-card is-flex-grow-1" }, ys = { class: "modal-card-body modal-slot py-0 is-align-content-center has-text-centered" }, ms = { class: "modal-card-foot is-flex-direction-column main toto" }, ks = { key: 1 }, Ca = {
   __name: "Modal",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ F({
     modelValue: Boolean,
     isFullHeight: {
       type: Boolean,
       default: !1
     }
   }, {
-    modelValue: {},
-    modelModifiers: {}
+    isActive: {},
+    isActiveModifiers: {},
+    showFooterMenu: {},
+    showFooterMenuModifiers: {}
   }),
-  emits: ["update:modelValue"],
-  setup(s) {
-    const p = q(s, "modelValue");
-    function c(i) {
-      xt().clear(), p.value = !1;
+  emits: ["update:isActive", "update:showFooterMenu"],
+  setup(o) {
+    const m = G(o, "isActive"), r = G(o, "showFooterMenu");
+    function v(e) {
+      Be().clear(), m.value = !1;
     }
-    return (i, m) => {
-      const v = se("router-link");
-      return t(), n("div", {
-        class: S(["modal modal-otp", { "is-active": p.value }])
+    return (e, k) => {
+      const g = H("router-link");
+      return t(), a("div", {
+        class: c(["modal modal-otp", { "is-active": m.value }])
       }, [
-        l("div", {
+        i("div", {
           class: "modal-background",
-          onClick: D(c, ["stop"])
+          onClick: z(v, ["stop"])
         }),
-        s.isFullHeight ? (t(), n("div", Ct, [
-          l("div", Tt, [
-            B(i.$slots, "default")
-          ])
-        ])) : (t(), n("div", Ot, [
-          l("section", Pt, [
-            l("div", Bt, [
-              l("div", At, [
-                l("div", Nt, [
-                  B(i.$slots, "default")
-                ])
-              ])
-            ])
-          ])
-        ])),
-        $(_(me), null, {
-          default: b(() => [
-            $(_(fe), {
-              action: "close",
-              useLinkTag: !1,
-              onClosed: c
-            })
+        i("div", vs, [
+          i("section", ys, [
+            T(e.$slots, "default")
           ]),
-          subpart: b(() => [
-            i.$route.name != "accounts" ? (t(), O(v, {
-              key: 0,
-              id: "lnkBackToHome",
-              to: { name: "accounts" },
-              class: "has-text-grey"
+          r.value == !0 ? (t(), a("div", {
+            key: 0,
+            onClick: k[0] || (k[0] = (n) => r.value = !1),
+            class: "footer-overlay"
+          })) : f("", !0),
+          i("footer", ms, [
+            h(d(fe), {
+              "show-menu": r.value,
+              "onUpdate:showMenu": k[1] || (k[1] = (n) => r.value = n)
             }, {
-              default: b(() => [
-                L(y(i.$t("link.back_to_home")), 1)
+              default: $(() => [
+                h(d(pt), {
+                  action: "close",
+                  useLinkTag: !1,
+                  onClosed: v
+                })
               ]),
-              _: 1
-            })) : (t(), n("span", Lt, " "))
-          ]),
-          _: 1
-        })
+              submenu: $(() => [
+                T(e.$slots, "footer-submenu")
+              ]),
+              subpart: $(() => [
+                T(e.$slots, "footer-subpart", {}, () => [
+                  e.$route.name != "accounts" ? (t(), O(g, {
+                    key: 0,
+                    id: "lnkBackToHome",
+                    to: { name: "accounts" },
+                    class: "has-text-grey"
+                  }, {
+                    default: $(() => [
+                      S(p(e.$t("link.back_to_home")), 1)
+                    ]),
+                    _: 1
+                  })) : (t(), a("span", ks, " "))
+                ])
+              ]),
+              _: 3
+            }, 8, ["show-menu"])
+          ])
+        ])
       ], 2);
     };
   }
-}, Mt = Ve({
+}, Ie = ht({
   legacy: !1,
   locale: "en",
   fallbackLocale: "en",
   globalInjection: !0
 });
-function pe(s, p, c, i, m) {
-  s || (s = "");
-  var v = String(z(s));
-  const u = () => {
-    const o = z(c);
-    if (v.length > 0) {
-      const a = Math.ceil(o < 1 ? v.length * o : o), h = v.match(new RegExp(`.{1,${a}}`, "g"));
-      h && (v = h.join(" "));
+function E(o, m, r, v, e) {
+  o || (o = "");
+  var k = String(K(o));
+  const g = () => {
+    const l = K(r);
+    if (k.length > 0) {
+      const y = Math.ceil(l < 1 ? k.length * l : l), b = k.match(new RegExp(`.{1,${y}}`, "g"));
+      b && (k = b.join(" "));
     }
-  }, e = () => {
-    v.length > 0 && !z(m) && (v = v.replace(/[0-9]/g, "●"));
+  }, n = () => {
+    k.length > 0 && !K(e) && (k = k.replace(/[0-9]/g, "●"));
   };
-  return z(p) == !0 && u(), z(i) && e(), v;
+  return K(m) == !0 && g(), K(v) && n(), k;
 }
-const zt = { key: 0 }, Dt = {
+const gs = { key: 0 }, bs = {
   key: 0,
   class: "spinner-container"
-}, Vt = { class: "spinner-wrapper" }, Et = {
+}, ws = { class: "spinner-wrapper" }, $s = {
   id: "icnSpinnerFull",
   class: "is-size-1 spinner"
-}, It = {
+}, _s = {
   key: 1,
   class: "spinner-overlay-container"
-}, Ft = { class: "spinner-wrapper" }, Rt = {
+}, Ss = { class: "spinner-wrapper" }, Cs = {
   id: "icnSpinnerFull",
   class: "is-size-1 spinner"
-}, Gt = {
+}, Os = {
   key: 3,
   class: "has-text-centered mt-6"
-}, Wt = { id: "icnSpinner" }, Kt = {
+}, Ms = { id: "icnSpinner" }, Ts = {
   __name: "Spinner",
   props: {
     isVisible: Boolean,
@@ -601,8 +834,8 @@ const zt = { key: 0 }, Dt = {
       type: String,
       default: "raw",
       required: !0,
-      validator(s, p) {
-        return ["raw", "list-loading", "fullscreen", "fullscreen-overlay"].includes(s);
+      validator(o, m) {
+        return ["raw", "list-loading", "fullscreen", "fullscreen-overlay"].includes(o);
       }
     },
     message: {
@@ -614,44 +847,44 @@ const zt = { key: 0 }, Dt = {
       default: 24
     }
   },
-  setup(s) {
-    return (p, c) => s.isVisible ? (t(), n("div", zt, [
-      s.type == "fullscreen" ? (t(), n("div", Dt, [
-        l("div", Vt, [
-          l("span", Et, [
-            $(_(W), { class: "spinning icon-size-3" })
+  setup(o) {
+    return (m, r) => o.isVisible ? (t(), a("div", gs, [
+      o.type == "fullscreen" ? (t(), a("div", bs, [
+        i("div", ws, [
+          i("span", $s, [
+            h(d(W), { class: "spinning icon-size-3" })
           ]),
-          l("span", null, y(p.$t(s.message)), 1)
+          i("span", null, p(m.$t(o.message)), 1)
         ])
-      ])) : s.type == "fullscreen-overlay" ? (t(), n("div", It, [
-        l("div", Ft, [
-          l("span", Rt, [
-            $(_(W), { class: "spinning icon-size-3" })
+      ])) : o.type == "fullscreen-overlay" ? (t(), a("div", _s, [
+        i("div", Ss, [
+          i("span", Cs, [
+            h(d(W), { class: "spinning icon-size-3" })
           ]),
-          l("span", null, y(p.$t(s.message)), 1)
+          i("span", null, p(m.$t(o.message)), 1)
         ])
-      ])) : s.type == "raw" ? (t(), O(_(W), {
+      ])) : o.type == "raw" ? (t(), O(d(W), {
         key: 2,
         class: "spinning lucide-default-size",
-        size: s.rawSize
-      }, null, 8, ["size"])) : s.type == "list-loading" ? (t(), n("div", Gt, [
-        l("span", Wt, [
-          $(_(W), { class: "spinning icon-size-2" })
+        size: o.rawSize
+      }, null, 8, ["size"])) : o.type == "list-loading" ? (t(), a("div", Os, [
+        i("span", Ms, [
+          h(d(W), { class: "spinning icon-size-2" })
         ])
-      ])) : g("", !0)
-    ])) : g("", !0);
+      ])) : f("", !0)
+    ])) : f("", !0);
   }
-}, Ut = ["src", "alt"], qt = ["title"], Ht = {
+}, As = ["src", "alt"], xs = ["title"], zs = ["title"], Ps = {
   key: 1,
   tabindex: "0",
   class: "otp is-size-1"
-}, jt = {
+}, Ls = {
   key: 0,
   class: "mt-3 is-size-4"
-}, Xt = ["title"], Jt = { key: 1 }, Qt = {
+}, Bs = ["title"], Is = { key: 1 }, Gs = {
   key: 1,
   class: "mt-3"
-}, ws = {
+}, Oa = {
   __name: "OtpDisplay",
   props: {
     twofaccountService: {
@@ -665,6 +898,10 @@ const zt = { key: 0 }, Dt = {
       type: Boolean,
       default: !0
     },
+    can_showFavorite: {
+      type: Boolean,
+      default: !0
+    },
     can_autoCloseTimeout: {
       type: Boolean,
       default: !0
@@ -672,7 +909,7 @@ const zt = { key: 0 }, Dt = {
     iconPathPrefix: String,
     accountParams: {
       type: Object,
-      default(s) {
+      default(o) {
         return {
           otp_type: "",
           account: "",
@@ -683,7 +920,8 @@ const zt = { key: 0 }, Dt = {
           algorithm: "",
           period: null,
           counter: null,
-          image: ""
+          image: "",
+          is_favorite: null
         };
       }
     },
@@ -693,14 +931,15 @@ const zt = { key: 0 }, Dt = {
     "please-close-me",
     "please-clear-search",
     "please-update-active-group",
+    "please-toggle-favorite",
     "kickme",
     "increment-hotp",
     "error",
     "validation-error",
     "otp-copied-to-clipboard"
   ],
-  setup(s, { expose: p, emit: c }) {
-    const { t: i } = Mt.global, { copy: m, copied: v } = De({ legacy: !0 }), u = c, e = s, o = e.twofaccountService, a = k(null), h = k(null), r = k({
+  setup(o, { expose: m, emit: r }) {
+    const { t: v } = Ie.global, { copy: e, copied: k } = Le({ legacy: !0 }), g = r, n = o, l = n.twofaccountService, y = x(null), b = x(null), s = x({
       otp_type: "",
       account: "",
       service: "",
@@ -710,197 +949,278 @@ const zt = { key: 0 }, Dt = {
       algorithm: "",
       period: null,
       counter: null,
-      image: ""
-    }), C = k(!1), T = k(""), E = P(() => pe(
-      T,
-      e.preferences.formatPassword,
-      e.preferences.formatPasswordBy,
-      e.preferences.showOtpAsDot,
-      C
-    )), w = k(""), A = P(() => pe(
-      w,
-      e.preferences.formatPassword,
-      e.preferences.formatPasswordBy,
-      e.preferences.showOtpAsDot,
-      C
-    )), N = k(null), I = k(!1), F = k(!1), ne = k("0"), ae = k(null), ie = K("dotsController"), X = K("dots"), he = K("otpSpanTag");
-    ve(
-      () => e.accountParams.icon,
-      (f) => {
-        f != null && (r.value.icon = f);
+      image: "",
+      is_favorite: null
+    }), u = x(!1), M = x(""), w = I(() => E(
+      M,
+      n.preferences.formatPassword,
+      n.preferences.formatPasswordBy,
+      n.preferences.showOtpAsDot,
+      u
+    )), L = x(""), N = I(() => E(
+      L,
+      n.preferences.formatPassword,
+      n.preferences.formatPasswordBy,
+      n.preferences.showOtpAsDot,
+      u
+    )), q = x(null), X = x(!1), J = x(!1), ve = x("0"), ye = x(null), me = te("dotsController"), ie = te("dots"), Ge = te("otpSpanTag");
+    Ae(
+      () => n.accountParams.icon,
+      (C) => {
+        C != null && (s.value.icon = C);
       }
     );
-    const ye = async (f) => {
-      if (C.value = !1, r.value.otp_type = e.accountParams.otp_type, r.value.account = e.accountParams.account, r.value.service = e.accountParams.service, r.value.icon = e.accountParams.icon, r.value.secret = e.accountParams.secret, r.value.digits = e.accountParams.digits, r.value.algorithm = e.accountParams.algorithm, r.value.period = e.accountParams.period, r.value.counter = e.accountParams.counter, re(), f) {
-        a.value = f;
-        const { data: d } = await o.get(a.value);
-        r.value.service = d.service, r.value.account = d.account, r.value.icon = d.icon, r.value.otp_type = d.otp_type, G(d.otp_type) && d.counter && (r.value.counter = d.counter);
-      } else e.uri ? (h.value = e.uri, r.value.otp_type = e.uri.slice(0, 15).toLowerCase() === "otpauth://totp/" ? "totp" : "hotp") : (e.accountParams.secret ? !R(r.value.otp_type) && !G(r.value.otp_type) && u("error", new Error(i("error.not_a_supported_otp_type"))) : u("error", new Error(i("error.cannot_create_otp_without_secret"))), R(r.value.otp_type) && (I.value = !0));
+    const Fe = async (C) => {
+      if (u.value = !1, s.value.otp_type = n.accountParams.otp_type, s.value.account = n.accountParams.account, s.value.service = n.accountParams.service, s.value.icon = n.accountParams.icon, s.value.secret = n.accountParams.secret, s.value.digits = n.accountParams.digits, s.value.algorithm = n.accountParams.algorithm, s.value.period = n.accountParams.period, s.value.counter = n.accountParams.counter, s.value.is_favorite = n.accountParams.is_favorite, ge(), C) {
+        y.value = C;
+        const { data: _ } = await l.get(y.value);
+        s.value.service = _.service, s.value.account = _.account, s.value.icon = _.icon, s.value.otp_type = _.otp_type, Z(_.otp_type) && _.counter && (s.value.counter = _.counter);
+      } else n.uri ? (b.value = n.uri, s.value.otp_type = n.uri.slice(0, 15).toLowerCase() === "otpauth://totp/" ? "totp" : "hotp") : (n.accountParams.secret ? !Y(s.value.otp_type) && !Z(s.value.otp_type) && g("error", new Error(v("error.not_a_supported_otp_type"))) : g("error", new Error(v("error.cannot_create_otp_without_secret"))), Y(s.value.otp_type) && (X.value = !0));
       try {
-        await le(), ge(), e.preferences.getOtpOnRequest && e.can_autoCloseTimeout && parseInt(e.preferences.autoCloseTimeout) > 0 && ke();
+        await ke(), Re(), n.preferences.getOtpOnRequest && n.can_autoCloseTimeout && parseInt(n.preferences.autoCloseTimeout) > 0 && qe();
       } catch {
-        J();
+        le();
       }
     };
-    async function le() {
-      e.can_showNextOtp && w.value ? (T.value = w.value, w.value = "", X.value.turnOff(), Q(0)) : re(), await _e().then((f) => {
-        let d = f.data;
-        T.value = d.password, w.value = e.can_showNextOtp && Object.prototype.hasOwnProperty.call(d, "next_password") ? d.next_password : "", e.preferences.copyOtpOnDisplay && M(d.password), R(d.otp_type) ? (N.value = d.generated_at, r.value.period = d.period, I.value = !0, de().then(() => {
-          ie.value.startStepping();
-        })) : G(d.otp_type) && (r.value.counter = d.counter, u("increment-hotp", { nextHotpCounter: d.counter, nextUri: d.uri }));
-      }).catch((f) => {
-        f.response.status === 422 && u("validation-error", f.response);
+    async function ke() {
+      n.can_showNextOtp && L.value ? (M.value = L.value, L.value = "", ie.value.turnOff(), re(0)) : ge(), await De().then((C) => {
+        let _ = C.data;
+        M.value = _.password, L.value = n.can_showNextOtp && Object.prototype.hasOwnProperty.call(_, "next_password") ? _.next_password : "", n.preferences.copyOtpOnDisplay && V(_.password), Y(_.otp_type) ? (q.value = _.generated_at, s.value.period = _.period, X.value = !0, $e().then(() => {
+          me.value.startStepping();
+        })) : Z(_.otp_type) && (s.value.counter = _.counter, g("increment-hotp", { nextHotpCounter: _.counter, nextUri: _.uri }));
+      }).catch((C) => {
+        C.response.status === 422 && g("validation-error", C.response);
       }).finally(() => {
-        F.value = !1;
+        J.value = !1;
       });
     }
-    function re() {
-      F.value = !0, X.value.turnOff();
+    function ge() {
+      J.value = !0, ie.value.turnOff();
     }
-    function _e() {
-      return a.value ? o.getOtpById(a.value) : h.value ? o.getOtpByUri(h.value) : o.getOtpByParams(r.value);
+    function De() {
+      return y.value ? l.getOtpById(y.value) : b.value ? l.getOtpByUri(b.value) : l.getOtpByParams(s.value);
     }
-    function ue() {
-      u("please-close-me"), C.value = !1, J();
+    function be() {
+      g("please-close-me"), u.value = !1, le();
     }
-    function J() {
-      var f;
-      a.value = r.value.counter = N.value = null, r.value.service = r.value.account = r.value.icon = r.value.otp_type = r.value.secret = "", T.value = "... ...", w.value = "", I.value = !1, clearTimeout(ae.value), (f = ie.value) == null || f.reset();
+    function le() {
+      y.value = s.value.counter = q.value = null, s.value.service = s.value.account = s.value.icon = s.value.otp_type = s.value.secret = "", M.value = "... ...", L.value = "", X.value = !1, clearTimeout(ye.value), me.value?.reset();
     }
-    function ge() {
-      de().then(() => {
-        var f;
-        (f = he.value) == null || f.focus();
+    function Re() {
+      $e().then(() => {
+        Ge.value?.focus();
       });
     }
-    function M(f, d) {
-      if (m(f.replace(/ /g, "")), v) {
-        if (e.preferences.kickUserAfter == -1 && (d || !1) === !0 ? u("kickme") : e.preferences.closeOtpOnCopy && (d || !1) === !0 && ue(), e.preferences.clearSearchOnCopy && u("please-clear-search"), e.preferences.viewDefaultGroupOnCopy) {
-          const x = e.preferences.defaultGroup == -1 ? e.preferences.activeGroup : e.preferences.defaultGroup;
-          u("please-update-active-group", x);
+    function V(C, _) {
+      if (e(C.replace(/ /g, "")), k) {
+        if (n.preferences.kickUserAfter == -1 && (_ || !1) === !0 ? g("kickme") : n.preferences.closeOtpOnCopy && (_ || !1) === !0 && be(), n.preferences.clearSearchOnCopy && g("please-clear-search"), n.preferences.viewDefaultGroupOnCopy) {
+          const P = n.preferences.defaultGroup == -1 ? n.preferences.activeGroup : n.preferences.defaultGroup;
+          g("please-update-active-group", P);
         }
-        u("otp-copied-to-clipboard");
+        g("otp-copied-to-clipboard");
       }
     }
-    function R(f) {
-      return f === "totp" || f === "steamtotp";
+    function Y(C) {
+      return C === "totp" || C === "steamtotp";
     }
-    function G(f) {
-      return f === "hotp";
+    function Z(C) {
+      return C === "hotp";
     }
-    function Q(f) {
-      X.value.turnOn(f), ne.value = "is-opacity-" + f;
+    function re(C) {
+      ie.value.turnOn(C), ve.value = "is-opacity-" + C;
     }
-    p({
-      show: ye,
-      clearOTP: J
+    m({
+      show: Fe,
+      clearOTP: le,
+      setFavorite: Ne
     });
-    function ke() {
-      let f = parseInt(e.preferences.autoCloseTimeout);
-      ae.value = setTimeout(function() {
-        ue();
-      }, f * 60 * 1e3);
+    function Ne(C) {
+      s.value.is_favorite = C;
+    }
+    function qe() {
+      let C = parseInt(n.preferences.autoCloseTimeout);
+      ye.value = setTimeout(function() {
+        be();
+      }, C * 60 * 1e3);
     }
-    return (f, d) => (t(), n("div", null, [
-      l("figure", {
-        class: S(["image is-64x64", { "no-icon": !r.value.icon }]),
+    return (C, _) => (t(), a("div", null, [
+      i("figure", {
+        class: c(["image is-64x64", { "no-icon": !s.value.icon }]),
         style: { display: "inline-flex" }
       }, [
-        r.value.icon ? (t(), n("img", {
+        s.value.icon ? (t(), a("img", {
           key: 0,
-          src: s.iconPathPrefix + "/storage/icons/" + r.value.icon,
-          alt: f.$t("alttext.icon_to_illustrate_the_account")
-        }, null, 8, Ut)) : g("", !0)
+          src: o.iconPathPrefix + "/storage/icons/" + s.value.icon,
+          alt: C.$t("alttext.icon_to_illustrate_the_account")
+        }, null, 8, As)) : f("", !0)
       ], 2),
-      $(_(oe), null, {
-        default: b(({ mode: x }) => [
-          l("p", {
-            class: S(["is-size-4 has-ellipsis", x == "dark" ? "has-text-grey-light" : "has-text-grey"])
-          }, y(r.value.service), 3),
-          l("p", {
-            class: S(["is-size-6 has-ellipsis", x == "dark" ? "has-text-grey" : "has-text-grey-light"])
-          }, y(r.value.account), 3),
-          l("p", null, [
-            F.value ? (t(), n("span", Ht, [
-              $(Kt, {
-                isVisible: F.value,
+      h(d(Q), null, {
+        default: $(({ mode: P }) => [
+          i("p", {
+            class: c(["is-size-4 has-ellipsis", P == "dark" ? "has-text-grey-light" : "has-text-grey"])
+          }, [
+            y.value && n.can_showFavorite && n.preferences.enableFavorites && s.value.is_favorite != null ? (t(), a("button", {
+              key: 0,
+              class: "p-0 button is-ghost favorite-icon",
+              onClick: _[0] || (_[0] = z((we) => C.$emit("please-toggle-favorite", y.value), ["stop"])),
+              title: C.$t("tooltip.remove_from_favorites")
+            }, [
+              s.value.is_favorite ? (t(), O(d(R), {
+                key: 0,
+                class: c(P == "dark" ? "has-text-warning-dark" : "has-text-warning-dark-invert"),
+                strokeWidth: 1,
+                fill: "#ffb400"
+              }, null, 8, ["class"])) : (t(), O(d(R), {
+                key: 1,
+                class: c(P == "dark" ? "has-text-grey-dark" : "has-text-grey-light"),
+                strokeWidth: 1,
+                fill: P == "dark" ? "#111" : "#f5f5f5",
+                title: C.$t("tooltip.set_as_favorite")
+              }, null, 8, ["class", "fill", "title"]))
+            ], 8, xs)) : f("", !0),
+            S(" " + p(s.value.service), 1)
+          ], 2),
+          i("p", {
+            class: c(["is-size-6 has-ellipsis", P == "dark" ? "has-text-grey" : "has-text-grey-light"])
+          }, p(s.value.account), 3),
+          i("p", null, [
+            J.value ? (t(), a("span", Ps, [
+              h(Ts, {
+                isVisible: J.value,
                 type: "raw"
               }, null, 8, ["isVisible"])
-            ])) : (t(), n("span", {
+            ])) : (t(), a("span", {
               key: 0,
               id: "otp",
               role: "log",
               ref: "otpSpanTag",
               tabindex: "0",
-              class: S(["otp is-size-1 is-clickable px-3", x == "dark" ? "has-text-white" : "has-text-grey-dark"]),
-              onClick: d[0] || (d[0] = ($e) => M(T.value, !0)),
-              onKeyup: d[1] || (d[1] = H(($e) => M(T.value, !0), ["enter"])),
-              title: f.$t("tooltip.copy_to_clipboard")
-            }, y(E.value), 43, qt))
+              class: c(["otp is-size-1 is-clickable px-3", P == "dark" ? "has-text-white" : "has-text-grey-dark"]),
+              onClick: _[1] || (_[1] = (we) => V(M.value, !0)),
+              onKeyup: _[2] || (_[2] = B((we) => V(M.value, !0), ["enter"])),
+              title: C.$t("tooltip.copy_to_clipboard")
+            }, p(w.value), 43, zs))
           ])
         ]),
         _: 1
       }),
-      Z($(Ie, { ref: "dots" }, null, 512), [
-        [ce, R(r.value.otp_type)]
+      D(h(yt, { ref: "dots" }, null, 512), [
+        [se, Y(s.value.otp_type)]
       ]),
-      Z(l("p", null, y(f.$t("field.counter")) + ": " + y(r.value.counter), 513), [
-        [ce, G(r.value.otp_type)]
+      D(i("p", null, p(C.$t("field.counter")) + ": " + p(s.value.counter), 513), [
+        [se, Z(s.value.otp_type)]
       ]),
-      e.can_showNextOtp && e.preferences.showNextOtp ? (t(), n("p", jt, [
-        w.value ? (t(), n("span", {
+      n.can_showNextOtp && n.preferences.showNextOtp ? (t(), a("p", Ls, [
+        L.value ? (t(), a("span", {
           key: 0,
-          class: S(["is-clickable", ne.value]),
-          onClick: d[2] || (d[2] = (x) => M(w.value, !0)),
-          onKeyup: d[3] || (d[3] = H((x) => M(w.value, !0), ["enter"])),
-          title: f.$t("tooltip.copy_next_password")
-        }, y(A.value), 43, Xt)) : (t(), n("span", Jt, " "))
-      ])) : g("", !0),
-      e.preferences.showOtpAsDot && e.preferences.revealDottedOTP ? (t(), n("p", Qt, [
-        l("button", {
+          class: c(["is-clickable", ve.value]),
+          onClick: _[3] || (_[3] = (P) => V(L.value, !0)),
+          onKeyup: _[4] || (_[4] = B((P) => V(L.value, !0), ["enter"])),
+          title: C.$t("tooltip.copy_next_password")
+        }, p(N.value), 43, Bs)) : (t(), a("span", Is, " "))
+      ])) : f("", !0),
+      n.preferences.showOtpAsDot && n.preferences.revealDottedOTP ? (t(), a("p", Gs, [
+        i("button", {
           type: "button",
           class: "button is-ghost has-text-grey-dark",
-          onClick: d[4] || (d[4] = D((x) => C.value = !C.value, ["stop"]))
+          onClick: _[5] || (_[5] = z((P) => u.value = !u.value, ["stop"]))
         }, [
-          C.value ? (t(), O(_(Ne), { key: 0 })) : (t(), O(_(Le), { key: 1 }))
+          u.value ? (t(), O(d(de), { key: 0 })) : (t(), O(d(pe), { key: 1 }))
         ])
-      ])) : g("", !0),
-      I.value ? (t(), O(Fe, {
+      ])) : f("", !0),
+      X.value ? (t(), O(mt, {
         key: 2,
-        period: r.value.period,
-        generated_at: N.value,
+        period: s.value.period,
+        generated_at: q.value,
         autostart: !1,
-        onSteppingEnded: d[5] || (d[5] = (x) => le()),
-        onSteppingStarted: d[6] || (d[6] = (x) => Q(x)),
-        onSteppedUp: d[7] || (d[7] = (x) => Q(x)),
+        onSteppingEnded: _[6] || (_[6] = (P) => ke()),
+        onSteppingStarted: _[7] || (_[7] = (P) => re(P)),
+        onSteppedUp: _[8] || (_[8] = (P) => re(P)),
         ref: "dotsController"
-      }, null, 8, ["period", "generated_at"])) : g("", !0)
+      }, null, 8, ["period", "generated_at"])) : f("", !0)
     ]));
   }
-}, Yt = {
+}, Fs = { class: "block" }, Ds = {
   key: 0,
-  class: "columns is-centered"
-}, Zt = { class: "form-column column is-two-thirds-tablet is-half-desktop is-half-widescreen is-one-third-fullhd" }, es = {
+  class: "block has-text-link"
+}, Rs = {
+  type: "button",
+  class: "button is-link is-outlined is-rounded"
+}, Ns = { class: "icon is-small" }, Ma = {
+  __name: "QrContentDisplay",
+  props: {
+    qrContent: String,
+    isCompact: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(o) {
+    const { copy: m } = Le({ legacy: !0 }), { t: r } = Ie.global, v = Be();
+    function e(n) {
+      var l = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/, y = new RegExp(l);
+      return y.test(n);
+    }
+    function k(n) {
+      const l = document.createElement("a");
+      l.setAttribute("href", n), l.dispatchEvent(new MouseEvent("click", { view: window, bubbles: !0, cancelable: !0 }));
+    }
+    function g(n) {
+      m(n), v.success({ text: r("notification.copied_to_clipboard") });
+    }
+    return (n, l) => (t(), a(A, null, [
+      l[2] || (l[2] = i("div", { class: "too-bad" }, null, -1)),
+      i("div", Fs, p(n.$t("error.data_of_qrcode_is_not_valid_URI")), 1),
+      i("div", {
+        class: c(["block light-or-darker", { "mb-6": !o.isCompact }])
+      }, p(o.qrContent ? o.qrContent : "[" + n.$t("message.nothing") + "]"), 3),
+      o.qrContent ? (t(), a("div", Ds, [
+        i("button", {
+          type: "button",
+          class: "button is-link is-outlined is-rounded",
+          onClick: l[0] || (l[0] = z((y) => g(o.qrContent), ["stop"]))
+        }, p(n.$t("label.copy_to_clipboard")), 1)
+      ])) : f("", !0),
+      e(o.qrContent) ? (t(), a("div", {
+        key: 1,
+        class: "block has-text-link",
+        onClick: l[1] || (l[1] = (y) => k(o.qrContent))
+      }, [
+        i("button", Rs, [
+          i("span", null, p(n.$t("label.open_in_browser")), 1),
+          i("span", Ns, [
+            h(d(nt))
+          ])
+        ])
+      ])) : f("", !0)
+    ], 64));
+  }
+}, qs = {
   __name: "ResponsiveWidthWrapper",
   props: {
     isActive: {
       type: Boolean,
       default: !0
+    },
+    isCompact: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(s) {
-    return (p, c) => s.isActive ? (t(), n("div", Yt, [
-      l("div", Zt, [
-        B(p.$slots, "default")
-      ])
-    ])) : B(p.$slots, "default", { key: 1 });
+  setup(o) {
+    return (m, r) => o.isActive ? (t(), a("div", {
+      key: 0,
+      class: c(["container", o.isCompact ? "pt-3" : "pt-6"])
+    }, [
+      T(m.$slots, "default")
+    ], 2)) : T(m.$slots, "default", {}, void 0, void 0, 1);
   }
-}, ts = {
+}, Us = {
   role: "search",
   class: "field"
-}, ss = { class: "control has-icons-right" }, os = ["aria-label", "title", "placeholder"], ns = { class: "icon is-small is-right" }, as = ["title"], bs = {
+}, Es = { class: "control has-icons-right" }, Vs = ["aria-label", "title", "placeholder"], Ks = { class: "icon is-small is-right" }, Ws = ["title"], Ta = {
   __name: "SearchBox",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ F({
     hasNoBackground: {
       type: Boolean,
       default: !1
@@ -914,58 +1234,56 @@ const zt = { key: 0 }, Dt = {
     keyword: {},
     keywordModifiers: {}
   }),
-  emits: /* @__PURE__ */ V(["cleared"], ["update:keyword"]),
-  setup(s, { emit: p }) {
-    const c = q(s, "keyword"), i = K("searchInput"), m = p;
-    j(() => {
-      document.addEventListener("keydown", v), document.addEventListener("keypress", e);
-    }), te(() => {
-      document.removeEventListener("keydown", v), document.removeEventListener("keypress", e);
+  emits: /* @__PURE__ */ F(["cleared"], ["update:keyword"]),
+  setup(o, { emit: m }) {
+    const r = G(o, "keyword"), v = te("searchInput"), e = m;
+    ne(() => {
+      document.addEventListener("keydown", k), document.addEventListener("keypress", n);
+    }), he(() => {
+      document.removeEventListener("keydown", k), document.removeEventListener("keypress", n);
     });
-    function v(o) {
-      var a;
-      o.key === "f" && (o.ctrlKey || o.metaKey) && (o.preventDefault(), (a = i.value) == null || a.focus());
+    function k(l) {
+      l.key === "f" && (l.ctrlKey || l.metaKey) && (l.preventDefault(), v.value?.focus());
     }
-    function u() {
-      c.value = "", m("cleared");
+    function g() {
+      r.value = "", e("cleared");
     }
-    function e(o) {
-      var a, h;
-      o.key !== "Enter" && (c.value = o.key, (a = i.value) == null || a.setSelectionRange(1, 1), (h = i.value) == null || h.focus(), o.preventDefault());
+    function n(l) {
+      l.key === "Enter" || l.code === "Space" || l.key === " " || (r.value = l.key, v.value?.setSelectionRange(1, 1), v.value?.focus(), l.preventDefault());
     }
-    return (o, a) => (t(), n("div", ts, [
-      l("div", ss, [
-        Z(l("input", {
-          "onUpdate:modelValue": a[0] || (a[0] = (h) => c.value = h),
+    return (l, y) => (t(), a("div", Us, [
+      i("div", Es, [
+        D(i("input", {
+          "onUpdate:modelValue": y[0] || (y[0] = (b) => r.value = b),
           onKeyup: [
-            a[1] || (a[1] = H(D((h) => {
-              u(), h.target.blur();
+            y[1] || (y[1] = B(z((b) => {
+              g(), b.target.blur();
             }, ["prevent"]), ["esc"])),
-            a[2] || (a[2] = H(D((h) => h.target.blur(), ["prevent"]), ["enter"]))
+            y[2] || (y[2] = B(z((b) => b.target.blur(), ["prevent"]), ["enter"]))
           ],
-          onKeypress: a[3] || (a[3] = D(() => {
+          onKeypress: y[3] || (y[3] = z(() => {
           }, ["stop"])),
           ref: "searchInput",
           id: "txtSearch",
           type: "search",
           tabindex: "1",
-          "aria-label": o.$t("label.search"),
-          title: o.$t("tooltip.search"),
-          placeholder: s.placeholder,
-          class: S(["input is-rounded is-search", { "has-no-background": s.hasNoBackground, "is-small": s.isSmall }])
-        }, null, 42, os), [
-          [be, c.value]
+          "aria-label": l.$t("label.search"),
+          title: l.$t("tooltip.search"),
+          placeholder: o.placeholder,
+          class: c(["input is-rounded is-search", { "has-no-background": o.hasNoBackground, "is-small": o.isSmall }])
+        }, null, 42, Vs), [
+          [Ee, r.value]
         ]),
-        l("span", ns, [
-          c.value != "" ? (t(), n("button", {
+        i("span", Ks, [
+          r.value != "" ? (t(), a("button", {
             key: 0,
             type: "button",
             id: "btnClearSearch",
             tabindex: "1",
-            title: o.$t("tooltip.clear_search"),
+            title: l.$t("tooltip.clear_search"),
             class: "clear-selection delete",
-            onClick: u
-          }, null, 8, as)) : (t(), O(_(Me), {
+            onClick: g
+          }, null, 8, Ws)) : (t(), O(d(it), {
             key: 1,
             class: "mr-2 icon-size-1"
           }))
@@ -973,7 +1291,55 @@ const zt = { key: 0 }, Dt = {
       ])
     ]));
   }
-}, is = { class: "options-header" }, ls = { class: "tabs is-centered is-fullwidth" }, rs = { role: "menubar" }, us = ["id", "onClick"], Ss = {
+}, js = {
+  key: 0,
+  class: "stack-header"
+}, Hs = { class: "stack-content" }, Qs = {
+  key: 3,
+  class: "stack-footer"
+}, Aa = {
+  __name: "StackLayout",
+  props: {
+    isVerticalCentered: {
+      type: Boolean,
+      default: !1
+    },
+    shouldGrow: {
+      type: Boolean,
+      default: !0
+    },
+    shouldShrinkSubheader: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(o) {
+    return (m, r) => (t(), a("div", {
+      class: c(["stack is-flex is-flex-direction-column", { "is-max-height": o.shouldGrow }])
+    }, [
+      m.$slots.header ? (t(), a("div", js, [
+        T(m.$slots, "header")
+      ])) : f("", !0),
+      m.$slots.subheader ? (t(), a("div", {
+        key: 1,
+        class: c(["stack-subheader", { "is-flex-shrink-0": o.shouldShrinkSubheader }])
+      }, [
+        T(m.$slots, "subheader")
+      ], 2)) : f("", !0),
+      m.$slots.content ? (t(), a("div", {
+        key: 2,
+        class: c(["stack-content-wrapper", { "is-align-content-center": o.isVerticalCentered, "is-flex-grow-1": o.shouldGrow }])
+      }, [
+        i("div", Hs, [
+          T(m.$slots, "content")
+        ])
+      ], 2)) : f("", !0),
+      m.$slots.footer ? (t(), a("div", Qs, [
+        T(m.$slots, "footer")
+      ])) : f("", !0)
+    ], 2));
+  }
+}, Xs = { class: "options-header" }, Js = { class: "tabs is-centered is-fullwidth" }, Ys = { role: "menubar" }, Zs = ["id", "onClick"], eo = { class: "is-invisible-tablet" }, to = { class: "is-size-7-mobile" }, xa = {
   __name: "TabBar",
   props: {
     tabs: {
@@ -989,21 +1355,33 @@ const zt = { key: 0 }, Dt = {
     }
   },
   emits: ["tab-selected"],
-  setup(s, { emit: p }) {
-    const c = s, i = p;
-    return (m, v) => (t(), n("div", is, [
-      $(es, { "is-active": s.isResponsive }, {
-        default: b(() => [
-          l("nav", ls, [
-            l("ul", rs, [
-              (t(!0), n(U, null, ee(c.tabs, (u) => (t(), n("li", {
-                key: u.view,
-                class: S({ "is-active": u.view === c.activeTab })
+  setup(o, { emit: m }) {
+    const r = o, v = m;
+    return (e, k) => (t(), a("div", Xs, [
+      h(qs, {
+        "is-active": o.isResponsive,
+        "is-compact": !0
+      }, {
+        default: $(() => [
+          i("nav", Js, [
+            i("ul", Ys, [
+              (t(!0), a(A, null, j(r.tabs, (g) => (t(), a("li", {
+                key: g.view,
+                class: c({ "is-active": g.view === r.activeTab })
               }, [
-                l("a", {
-                  id: u.id,
-                  onClick: (e) => i("tab-selected", u.view)
-                }, y(m.$t(u.name)), 9, us)
+                i("a", {
+                  id: g.id,
+                  onClick: (n) => v("tab-selected", g.view),
+                  class: "is-flex-direction-column"
+                }, [
+                  i("span", eo, [
+                    h(d(Vt), {
+                      name: g.icon,
+                      strokeWidth: 1
+                    }, null, 8, ["name"])
+                  ]),
+                  i("span", to, p(e.$t(g.name)), 1)
+                ], 8, Zs)
               ], 2))), 128))
             ])
           ])
@@ -1012,21 +1390,904 @@ const zt = { key: 0 }, Dt = {
       }, 8, ["is-active"])
     ]));
   }
+}, so = {
+  key: 0,
+  class: "table tfa-table is-fullwidth"
+}, oo = { id: "dv" }, za = {
+  __name: "TwoFAccountList",
+  props: {
+    useDesktopTableLayout: {
+      type: Boolean,
+      default: !1
+    },
+    isCentered: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(o) {
+    const m = o;
+    return (r, v) => m.useDesktopTableLayout ? (t(), a("table", so, [
+      i("tbody", oo, [
+        T(r.$slots, "default")
+      ])
+    ])) : (t(), a("span", {
+      key: 1,
+      id: "dv",
+      class: c(["columns is-multiline m-0", { "is-centered": o.isCentered === !0 }])
+    }, [
+      T(r.$slots, "default")
+    ], 2));
+  }
+}, ao = { class: "tfa-container" }, no = {
+  key: 0,
+  class: "tfa-min-height is-size-4-mobile is-size-3"
+}, io = { class: "tfa-checkradio" }, lo = ["id", "value", "name"], ro = ["for"], uo = {
+  class: "is-block is-size-6 is-size-7-mobile",
+  role: "button"
+}, co = {
+  key: 1,
+  class: "tfa-cell tfa-checkbox"
+}, po = { class: "field" }, fo = ["id", "value", "name"], ho = ["for"], vo = { class: "tfa-text has-ellipsis is-clickable" }, yo = ["src"], mo = ["src"], ko = { class: "is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey" }, go = ["title"], bo = ["title"], wo = ["title"], $o = {
+  key: 0,
+  class: "py-1"
+}, _o = {
+  key: 1,
+  class: "py-1"
+}, So = { class: "has-text-right" }, Co = ["title"], Oo = {
+  key: 1,
+  class: "has-nowrap pt-1",
+  style: { "line-height": ".8rem" }
+}, Mo = ["title"], To = ["title"], Ao = {
+  key: 0,
+  class: "tfa-cell tfa-edit has-text-grey"
+}, xo = {
+  key: 1,
+  class: "tfa-cell tfa-edit has-text-grey"
+}, zo = {
+  key: 0,
+  class: "drag-handle tfa-cell tfa-dots has-text-grey"
+}, Po = {
+  key: 1,
+  class: "tfa-table"
+}, Lo = { class: "is-narrow pr-0" }, Bo = { class: "tfa-checkradio" }, Io = ["id", "value", "name"], Go = ["for"], Fo = {
+  key: 0,
+  class: "is-narrow pr-0"
+}, Do = { class: "button is-ghost px-0" }, Ro = ["src"], No = ["src"], qo = ["title"], Uo = { class: "has-ellipsis" }, Eo = {
+  key: 0,
+  class: "is-narrow"
+}, Vo = { key: 1 }, Ko = {
+  key: 2,
+  class: "is-narrow"
+}, Wo = ["title"], jo = {
+  key: 0,
+  class: "has-nowrap",
+  style: { lineHeight: "1rem" }
+}, Ho = ["title"], Qo = { key: 3 }, Xo = ["title"], Jo = {
+  key: 4,
+  class: "is-narrow has-text-grey is-size-7"
+}, Yo = ["title"], Zo = { class: "is-narrow has-text-right" }, ea = ["title"], ta = {
+  key: 1,
+  class: "tfa-cell is-flex is-flex-direction-row"
+}, sa = ["title"], oa = {
+  key: 0,
+  class: "shares-list is-size-7 pr-2"
+}, aa = ["title"], na = ["title"], ia = { class: "tags tfa-cell is-flex-wrap-nowrap" }, la = { class: "is-narrow" }, ra = {
+  key: 0,
+  class: "tfa-cell tfa-edit"
+}, ua = ["title"], ca = { class: "is-narrow" }, da = { class: "drag-handle tfa-cell tfa-dots has-text-grey" }, Pa = {
+  __name: "TwoFAccountListItem",
+  props: /* @__PURE__ */ F({
+    useDesktopTableLayout: {
+      type: Boolean,
+      default: !1
+    },
+    isFetchingShares: {
+      type: Boolean,
+      default: !1
+    },
+    storageRootPath: {
+      type: String,
+      default: ""
+    },
+    colorScheme: {
+      type: String,
+      default: "dark"
+    },
+    inManagementMode: {
+      type: Boolean,
+      default: !0
+    },
+    enableSharing: {
+      type: Boolean,
+      default: !0
+    },
+    enableAllUsersSharingScope: {
+      type: Boolean,
+      default: !0
+    },
+    nextOtpOpacityClass: {
+      type: String,
+      default: "is-opacity-0"
+    },
+    preferences: {
+      type: Object,
+      default(o) {
+        return {
+          displayMode: "list",
+          enableFavorites: !0,
+          showAccountsIcons: !0,
+          getOtpOnRequest: !0,
+          showOtpAsDot: !1,
+          revealDottedOTP: !1,
+          showNextOtp: !0,
+          formatPassword: !0,
+          formatPasswordBy: 0.5,
+          activeGroup: 0
+        };
+      }
+    },
+    account: {
+      type: Object,
+      default(o) {
+        return {
+          id: null,
+          otp_type: "totp",
+          service: "",
+          account: "",
+          period: null,
+          is_favorite: !1,
+          icon: "",
+          is_borrowed: !1,
+          borrowed_by: "",
+          is_shared: !1,
+          is_shared_with_all: !1,
+          otp: {
+            password: "",
+            next_password: ""
+          }
+        };
+      }
+    }
+  }, {
+    selectedTwofaccountIds: {},
+    selectedTwofaccountIdsModifiers: {},
+    specificShares: {},
+    specificSharesModifiers: {}
+  }),
+  emits: /* @__PURE__ */ F([
+    "update:selected-twofaccount-ids",
+    "show-or-copy",
+    "get-and-copy-otp",
+    "copy-to-clipboard",
+    "toggle-is-favorite",
+    "show-otp",
+    "get-shares",
+    "delete-account-clicked"
+  ], ["update:selectedTwofaccountIds", "update:specificShares"]),
+  setup(o, { emit: m }) {
+    const r = G(o, "selectedTwofaccountIds"), v = G(o, "specificShares"), e = o, k = x(null), g = x(null), n = I(() => e.colorScheme == "dark" ? "is-dark" : "is-white"), l = I(() => e.colorScheme == "dark" ? "tag is-black is-opacity-4" : "tag is-light is-white"), y = m;
+    function b(s) {
+      v.value.length == 0 ? y("get-shares", s) : v.value = [];
+    }
+    return (s, u) => {
+      const M = H("router-link");
+      return o.useDesktopTableLayout ? (t(), a("tr", Po, [
+        i("td", Lo, [
+          i("span", Bo, [
+            D(i("input", {
+              class: c(["is-checkradio is-small", e.colorScheme == "dark" ? "is-white" : "is-info"]),
+              id: "ckb_" + e.account.id,
+              value: e.account.id,
+              type: "checkbox",
+              name: "ckb_" + e.account.id,
+              "onUpdate:modelValue": u[18] || (u[18] = (w) => r.value = w)
+            }, null, 10, Io), [
+              [ue, r.value]
+            ]),
+            i("label", {
+              tabindex: "0",
+              class: "mr-0 pr-0",
+              for: "ckb_" + e.account.id,
+              onKeypress: u[19] || (u[19] = B(z((w) => s.selectAccount(o.account), ["prevent"]), ["space"]))
+            }, null, 40, Go)
+          ])
+        ]),
+        e.preferences.enableFavorites ? (t(), a("td", Fo, [
+          i("button", Do, [
+            e.account.is_favorite ? (t(), O(d(R), {
+              key: 0,
+              class: c(["is-clickable", e.colorScheme == "dark" ? "has-text-warning-dark" : "has-text-warning-dark-invert"]),
+              onClick: u[20] || (u[20] = (w) => s.$emit("toggle-is-favorite", e.account.id)),
+              strokeWidth: 1,
+              fill: "#ffb400",
+              title: s.$t("tooltip.remove_from_favorites")
+            }, null, 8, ["class", "title"])) : (t(), O(d(R), {
+              key: 1,
+              class: c(["is-clickable", e.colorScheme == "dark" ? "has-text-grey-dark" : "has-text-grey-light"]),
+              onClick: u[21] || (u[21] = (w) => s.$emit("toggle-is-favorite", e.account.id)),
+              strokeWidth: 1,
+              fill: o.colorScheme == "dark" ? "#111" : "#f5f5f5",
+              title: s.$t("tooltip.set_as_favorite")
+            }, null, 8, ["class", "fill", "title"]))
+          ])
+        ])) : f("", !0),
+        i("td", {
+          class: "is-size-4 is-narrow is-clickable",
+          onClick: u[22] || (u[22] = z((w) => s.$emit("show-or-copy", o.account), ["exact"])),
+          onKeyup: u[23] || (u[23] = B((w) => s.$emit("show-or-copy", o.account), ["enter"]))
+        }, [
+          e.account.icon && e.preferences.showAccountsIcons ? (t(), a("img", {
+            key: 0,
+            role: "presentation",
+            class: "tfa-icon",
+            src: o.storageRootPath + "/storage/icons/" + e.account.icon,
+            alt: ""
+          }, null, 8, Ro)) : e.account.icon == null && e.preferences.showAccountsIcons ? (t(), a("img", {
+            key: 1,
+            role: "presentation",
+            class: "tfa-icon",
+            src: o.storageRootPath + "/storage/noicon.svg",
+            alt: ""
+          }, null, 8, No)) : f("", !0),
+          S(" " + p(e.account.service ? e.account.service : s.$t("message.no_service")), 1),
+          e.account.account === s.$t("error.indecipherable") ? (t(), O(d(Se), {
+            key: 2,
+            class: "has-text-danger ml-2"
+          })) : f("", !0),
+          e.account.otp_type == "hotp" ? (t(), a("span", {
+            key: 3,
+            class: c(["ml-2", l.value]),
+            title: s.$t("tooltip.current_counter")
+          }, p(e.account.counter), 11, qo)) : f("", !0)
+        ], 32),
+        i("td", {
+          class: "is-family-primary is-size-6 has-text-grey is-clickable",
+          onClick: u[24] || (u[24] = z((w) => s.$emit("show-or-copy", o.account), ["exact"])),
+          onKeyup: u[25] || (u[25] = B((w) => s.$emit("show-or-copy", o.account), ["enter"]))
+        }, [
+          i("span", Uo, p(e.account.account), 1)
+        ], 32),
+        e.preferences.getOtpOnRequest == !1 && e.preferences.showOtpAsDot && e.preferences.revealDottedOTP ? (t(), a(A, { key: 1 }, [
+          e.account.otp_type.includes("totp") ? (t(), a("td", Eo, [
+            k.value == e.account.id ? (t(), a("button", {
+              key: 0,
+              type: "button",
+              class: "button p-1 is-ghost has-text-grey-dark",
+              onClick: u[26] || (u[26] = z((w) => k.value = null, ["stop"]))
+            }, [
+              h(d(de))
+            ])) : (t(), a("button", {
+              key: 1,
+              type: "button",
+              class: "button p-1 is-ghost has-text-grey-dark",
+              onClick: u[27] || (u[27] = z((w) => k.value = e.account.id, ["stop"]))
+            }, [
+              h(d(pe))
+            ]))
+          ])) : (t(), a("td", Vo))
+        ], 64)) : f("", !0),
+        e.preferences.getOtpOnRequest == !1 ? (t(), a("td", Ko, [
+          e.account.otp != null ? (t(), a(A, { key: 0 }, [
+            i("div", {
+              class: "always-on-otp is-clickable has-nowrap is-size-5",
+              onClick: u[28] || (u[28] = (w) => s.$emit("copy-to-clipboard", e.account.otp.password)),
+              onKeyup: u[29] || (u[29] = B((w) => s.$emit("copy-to-clipboard", e.account.otp.password), ["enter"])),
+              title: s.$t("tooltip.copy_to_clipboard")
+            }, p(d(E)(
+              e.account.otp.password,
+              e.preferences.formatPassword,
+              e.preferences.formatPasswordBy,
+              e.preferences.showOtpAsDot,
+              e.preferences.revealDottedOTP && k.value == e.account.id
+            )), 41, Wo),
+            e.account.otp_type.includes("totp") ? (t(), a("div", jo, [
+              T(s.$slots, "dots")
+            ])) : f("", !0)
+          ], 64)) : (t(), a("div", {
+            key: 1,
+            class: c({ "mt-5": e.preferences.displayMode == "grid" })
+          }, [
+            i("button", {
+              type: "button",
+              class: c(["button tag", n.value]),
+              onClick: u[30] || (u[30] = (w) => s.$emit("show-otp", o.account)),
+              title: s.$t("tooltip.import_this_account")
+            }, p(s.$t("label.generate")), 11, Ho)
+          ], 2))
+        ])) : (t(), a("td", Qo, [
+          e.account.otp_type.includes("totp") ? (t(), a("button", {
+            key: 0,
+            type: "button",
+            class: "button is-small is-rounded",
+            onClick: u[31] || (u[31] = z((w) => s.$emit("get-and-copy-otp", o.account), ["stop"])),
+            title: s.$t("tooltip.get_and_copy_in_a_click")
+          }, p(s.$t("label.get_and_copy")), 9, Xo)) : f("", !0)
+        ])),
+        e.preferences.getOtpOnRequest == !1 && e.preferences.showNextOtp ? (t(), a("td", Jo, [
+          e.account.otp != null ? (t(), a("span", {
+            key: 0,
+            class: c(["is-clickable has-nowrap", o.nextOtpOpacityClass]),
+            onClick: u[32] || (u[32] = (w) => s.$emit("copy-to-clipboard", e.account.otp.next_password)),
+            onKeyup: u[33] || (u[33] = B((w) => s.$emit("copy-to-clipboard", e.account.otp.next_password), ["enter"])),
+            title: s.$t("tooltip.copy_next_password")
+          }, p(d(E)(
+            e.account.otp.next_password,
+            e.preferences.formatPassword,
+            e.preferences.formatPasswordBy,
+            e.preferences.showOtpAsDot,
+            e.preferences.revealDottedOTP && k.value == e.account.id
+          )), 43, Yo)) : f("", !0)
+        ])) : f("", !0),
+        i("td", Zo, [
+          e.enableSharing ? (t(), a(A, { key: 0 }, [
+            e.account.is_borrowed ? (t(), a("span", {
+              key: 0,
+              title: s.$t("tooltip.this_account_is_shared_by_x_with_you", { username: e.account.borrowed_by }),
+              class: c(["p-1 mr-1", l.value])
+            }, " @" + p(e.account.borrowed_by), 11, ea)) : e.account.is_shared ? (t(), a("div", ta, [
+              i("div", null, [
+                i("span", {
+                  title: s.$t("tooltip.this_account_is_shared_with_specific_users"),
+                  class: c(l.value)
+                }, [
+                  h(d(ae), { class: "icon-size-0-75 mr-1" }),
+                  S(" " + p(s.$t("label.share_with_specific_users")), 1)
+                ], 10, sa),
+                v.value ? (t(), a("ul", oa, [
+                  (t(!0), a(A, null, j(v.value, (w) => (t(), a("li", {
+                    key: w.id,
+                    class: "my-1 is-block"
+                  }, [
+                    i("span", {
+                      class: c(l.value)
+                    }, p(w.name), 3)
+                  ]))), 128))
+                ])) : f("", !0)
+              ]),
+              i("div", null, [
+                i("button", {
+                  onClick: u[34] || (u[34] = (w) => b(o.account.id)),
+                  class: c(["ml-1", l.value]),
+                  title: s.$t("tooltip.share_with_new_users")
+                }, [
+                  e.isFetchingShares ? (t(), O(d(W), {
+                    key: 0,
+                    class: "spinning icon-size-0-75"
+                  })) : v.value.length > 0 ? (t(), O(d(Pe), {
+                    key: 1,
+                    class: "icon-size-0-75"
+                  })) : (t(), O(d(ut), {
+                    key: 2,
+                    class: "icon-size-0-75"
+                  }))
+                ], 10, aa)
+              ])
+            ])) : e.enableAllUsersSharingScope && e.account.is_shared_with_all ? (t(), a("span", {
+              key: 2,
+              title: s.$t("tooltip.this_account_is_shared_with_all"),
+              class: c(["tag p-1 mr-1", [{ "is-black is-opacity-4": e.colorScheme == "dark" }]])
+            }, [
+              h(d(oe), { class: "icon-size-0-75 mr-1" }),
+              S(p(s.$t("label.share_with_all")), 1)
+            ], 10, na)) : f("", !0)
+          ], 64)) : f("", !0)
+        ]),
+        i("td", null, [
+          i("div", ia, [
+            e.account.is_shared || e.account.is_shared_with_all ? (t(), O(M, {
+              key: 0,
+              to: { name: "accountSharing", params: { twofaccountId: e.account.id } },
+              class: c(["tag is-rounded", n.value]),
+              title: s.$t("tooltip.edit_sharing")
+            }, {
+              default: $(() => [
+                S(p(s.$t("link.manage_sharing")), 1)
+              ]),
+              _: 1
+            }, 8, ["to", "class", "title"])) : (t(), O(M, {
+              key: 1,
+              to: { name: "accountSharing", params: { twofaccountId: e.account.id } },
+              class: c(["tag is-rounded", n.value]),
+              title: s.$t("tooltip.share_this_account")
+            }, {
+              default: $(() => [
+                S(p(s.$t("label.share")), 1)
+              ]),
+              _: 1
+            }, 8, ["to", "class", "title"])),
+            h(M, {
+              id: "lnkTransferOwnership",
+              to: { name: "transferOwnership", params: { twofaccountId: e.account.id } },
+              class: c(["tag is-rounded", n.value]),
+              title: s.$t("link.transfer_ownership")
+            }, {
+              default: $(() => [
+                S(p(s.$t("label.transfer")), 1)
+              ]),
+              _: 1
+            }, 8, ["to", "class", "title"])
+          ])
+        ]),
+        i("td", la, [
+          !e.enableSharing || e.enableSharing && !e.account.is_borrowed ? (t(), a("div", ra, [
+            h(M, {
+              to: { name: "editAccount", params: { twofaccountId: e.account.id } },
+              class: c(["tag is-rounded mr-1", n.value]),
+              title: s.$t("tooltip.edit_account")
+            }, {
+              default: $(() => [
+                h(d(ct), { class: "icon-size-1" })
+              ]),
+              _: 1
+            }, 8, ["to", "class", "title"]),
+            h(M, {
+              to: { name: "showQRcode", params: { twofaccountId: e.account.id } },
+              class: c(["tag is-rounded mr-1", n.value]),
+              title: s.$t("tooltip.show_qrcode")
+            }, {
+              default: $(() => [
+                h(d(Me), { class: "icon-size-1" })
+              ]),
+              _: 1
+            }, 8, ["to", "class", "title"]),
+            h(M, {
+              to: { name: "otpLogs", params: { twofaccountId: e.account.id } },
+              class: c(["tag is-rounded mr-1", n.value]),
+              title: s.$t("link.otp_generation_log")
+            }, {
+              default: $(() => [
+                h(d(Te), { class: "icon-size-1" })
+              ]),
+              _: 1
+            }, 8, ["to", "class", "title"]),
+            i("button", {
+              onClick: u[35] || (u[35] = (w) => s.$emit("delete-account-clicked", e.account.id)),
+              class: c(["tag is-rounded", n.value]),
+              title: s.$t("tooltip.delete_account")
+            }, [
+              h(d(dt), { class: "icon-size-1" })
+            ], 10, ua)
+          ])) : f("", !0)
+        ]),
+        i("td", ca, [
+          i("div", da, [
+            h(d(ce))
+          ])
+        ])
+      ])) : (t(), a("div", {
+        key: 0,
+        class: c([[e.preferences.displayMode === "grid" ? "tfa-grid" : "tfa-list"], "column is-narrow"])
+      }, [
+        i("div", ao, [
+          h(U, { name: "slideCheckbox" }, {
+            default: $(() => [
+              e.preferences.enableFavorites && e.inManagementMode ? (t(), a("div", no, [
+                i("span", io, [
+                  D(i("input", {
+                    class: c(["is-checkradio is-small", e.colorScheme == "dark" ? "is-white" : "is-info"]),
+                    id: "ckb_" + e.account.id,
+                    value: e.account.id,
+                    type: "checkbox",
+                    name: "ckb_" + e.account.id,
+                    "onUpdate:modelValue": u[0] || (u[0] = (w) => r.value = w)
+                  }, null, 10, lo), [
+                    [ue, r.value]
+                  ]),
+                  i("label", {
+                    tabindex: "0",
+                    class: "",
+                    for: "ckb_" + e.account.id,
+                    onKeypress: u[1] || (u[1] = B(z((w) => s.selectAccount(o.account), ["prevent"]), ["space"]))
+                  }, null, 40, ro)
+                ]),
+                i("span", uo, [
+                  e.account.is_favorite ? (t(), O(d(R), {
+                    key: 0,
+                    class: c(["is-clickable", e.colorScheme == "dark" ? "has-text-warning-dark" : "has-text-warning-dark-invert"]),
+                    onClick: u[2] || (u[2] = (w) => s.$emit("toggle-is-favorite", e.account.id)),
+                    strokeWidth: 1,
+                    fill: "#ffb400",
+                    title: s.$t("tooltip.remove_from_favorites")
+                  }, null, 8, ["class", "title"])) : (t(), O(d(R), {
+                    key: 1,
+                    class: c(["is-clickable", e.colorScheme == "dark" ? "has-text-grey-dark" : "has-text-grey-light"]),
+                    onClick: u[3] || (u[3] = (w) => s.$emit("toggle-is-favorite", e.account.id)),
+                    strokeWidth: 1,
+                    fill: o.colorScheme == "dark" ? "#111" : "#f5f5f5",
+                    title: s.$t("tooltip.set_as_favorite")
+                  }, null, 8, ["class", "fill", "title"]))
+                ])
+              ])) : e.inManagementMode ? (t(), a("div", co, [
+                i("div", po, [
+                  D(i("input", {
+                    class: c(["is-checkradio is-small", e.colorScheme == "dark" ? "is-white" : "is-info"]),
+                    id: "ckb_" + e.account.id,
+                    value: e.account.id,
+                    type: "checkbox",
+                    name: "ckb_" + e.account.id,
+                    "onUpdate:modelValue": u[4] || (u[4] = (w) => r.value = w)
+                  }, null, 10, fo), [
+                    [ue, r.value]
+                  ]),
+                  i("label", {
+                    tabindex: "0",
+                    for: "ckb_" + e.account.id,
+                    onKeypress: u[5] || (u[5] = B(z((w) => s.selectAccount(o.account), ["prevent"]), ["space"]))
+                  }, null, 40, ho)
+                ])
+              ])) : f("", !0)
+            ]),
+            _: 1
+          }),
+          i("div", {
+            tabindex: "0",
+            class: "tfa-cell tfa-content is-size-3 is-size-4-mobile",
+            onClick: [
+              u[6] || (u[6] = z((w) => s.$emit("show-or-copy", o.account), ["exact"])),
+              u[8] || (u[8] = z((w) => s.$emit("get-and-copy-otp", o.account), ["ctrl"]))
+            ],
+            onKeyup: u[7] || (u[7] = B((w) => s.$emit("show-or-copy", o.account), ["enter"])),
+            role: "button"
+          }, [
+            i("div", vo, [
+              e.account.icon && e.preferences.showAccountsIcons ? (t(), a("img", {
+                key: 0,
+                role: "presentation",
+                class: "tfa-icon",
+                src: o.storageRootPath + "/storage/icons/" + e.account.icon,
+                alt: ""
+              }, null, 8, yo)) : e.account.icon == null && e.preferences.showAccountsIcons ? (t(), a("img", {
+                key: 1,
+                role: "presentation",
+                class: "tfa-icon",
+                src: o.storageRootPath + "/storage/noicon.svg",
+                alt: ""
+              }, null, 8, mo)) : f("", !0),
+              S(" " + p(e.account.service ? e.account.service : s.$t("message.no_service")), 1),
+              e.account.account === s.$t("error.indecipherable") ? (t(), O(d(Se), {
+                key: 2,
+                class: "has-text-danger ml-2"
+              })) : f("", !0),
+              i("span", ko, [
+                e.enableSharing && e.account.is_borrowed ? (t(), a("span", {
+                  key: 0,
+                  title: s.$t("tooltip.this_account_is_shared_by_x_with_you", { username: e.account.borrowed_by }),
+                  class: c(["p-1 mr-1", l.value])
+                }, " @" + p(e.inManagementMode ? e.account.borrowed_by : ""), 11, go)) : e.enableSharing && e.account.is_shared ? (t(), a("span", {
+                  key: 1,
+                  title: s.$t("tooltip.this_account_is_shared_with_specific_users"),
+                  class: c(["p-1 mr-1", l.value])
+                }, [
+                  h(d(ae), { class: "icon-size-0-75" })
+                ], 10, bo)) : e.enableSharing && e.enableAllUsersSharingScope && e.account.is_shared_with_all ? (t(), a("span", {
+                  key: 2,
+                  title: s.$t("tooltip.this_account_is_shared_with_all"),
+                  class: c(["p-1 mr-1", l.value])
+                }, [
+                  h(d(oe), { class: "icon-size-0-75" })
+                ], 10, wo)) : f("", !0),
+                S(" " + p(e.account.account), 1)
+              ])
+            ])
+          ], 32),
+          e.enableSharing && e.preferences.getOtpOnRequest == !1 && !e.inManagementMode && g.value === e.account.id ? (t(), O(U, {
+            key: 0,
+            name: "popLater"
+          }, {
+            default: $(() => [
+              e.inManagementMode ? f("", !0) : (t(), a("div", {
+                key: 0,
+                class: c(["has-text-grey action-container", { "mt-3": e.preferences.displayMode == "grid" }])
+              }, [
+                e.account.is_shared || e.account.is_shared_with_all ? (t(), a("div", $o, [
+                  e.account.is_shared ? (t(), O(M, {
+                    key: 0,
+                    to: { name: "shareAccount", params: { twofaccountId: e.account.id } },
+                    class: c(["tag is-rounded mr-1", n.value]),
+                    title: s.$t("tooltip.share_with_new_users")
+                  }, {
+                    default: $(() => [
+                      h(d(Ce), { class: "icon-size-1" })
+                    ]),
+                    _: 1
+                  }, 8, ["to", "class", "title"])) : f("", !0),
+                  h(M, {
+                    to: { name: "accountSharing", params: { twofaccountId: e.account.id } },
+                    class: c(["tag is-rounded", n.value]),
+                    title: s.$t("tooltip.edit_sharing")
+                  }, {
+                    default: $(() => [
+                      h(d(Oe), { class: "icon-size-1" })
+                    ]),
+                    _: 1
+                  }, 8, ["to", "class", "title"])
+                ])) : (t(), a("div", _o, [
+                  h(M, {
+                    to: { name: "accountSharing", params: { twofaccountId: e.account.id } },
+                    class: c(["tag is-rounded mr-1", n.value]),
+                    title: s.$t("tooltip.share_this_account")
+                  }, {
+                    default: $(() => [
+                      S(p(s.$t("label.share")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["to", "class", "title"])
+                ])),
+                i("div", null, [
+                  h(M, {
+                    id: "lnkTransferOwnership",
+                    to: { name: "transferOwnership", params: { twofaccountId: e.account.id } },
+                    class: c(["tag is-rounded", n.value]),
+                    title: s.$t("link.transfer_ownership")
+                  }, {
+                    default: $(() => [
+                      S(p(s.$t("label.transfer_ownership")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["to", "class", "title"])
+                ])
+              ], 2))
+            ]),
+            _: 1
+          })) : (t(), a(A, { key: 1 }, [
+            e.account.otp_type.includes("totp") && e.preferences.showOtpAsDot && e.preferences.revealDottedOTP ? (t(), O(U, {
+              key: 0,
+              name: "popLater"
+            }, {
+              default: $(() => [
+                D(i("div", So, [
+                  k.value == e.account.id ? (t(), a("button", {
+                    key: 0,
+                    type: "button",
+                    class: "pr-0 button is-ghost has-text-grey-dark",
+                    onClick: u[9] || (u[9] = z((w) => k.value = null, ["stop"]))
+                  }, [
+                    h(d(de))
+                  ])) : (t(), a("button", {
+                    key: 1,
+                    type: "button",
+                    class: "pr-0 button is-ghost has-text-grey-dark",
+                    onClick: u[10] || (u[10] = z((w) => k.value = e.account.id, ["stop"]))
+                  }, [
+                    h(d(pe))
+                  ]))
+                ], 512), [
+                  [se, e.preferences.getOtpOnRequest == !1 && !e.inManagementMode]
+                ])
+              ]),
+              _: 1
+            })) : f("", !0),
+            h(U, { name: "popLater" }, {
+              default: $(() => [
+                D(i("div", {
+                  class: c({ "has-text-right": e.preferences.displayMode == "list" })
+                }, [
+                  e.account.otp != null ? (t(), a(A, { key: 0 }, [
+                    i("div", {
+                      class: c(["always-on-otp is-clickable has-nowrap has-text-grey is-size-5", { "mt-4": e.preferences.displayMode == "grid", "ml-4": e.preferences.displayMode != "grid", "pt-2": e.preferences.showNextOtp }]),
+                      onClick: u[11] || (u[11] = (w) => s.$emit("copy-to-clipboard", e.account.otp.password)),
+                      onKeyup: u[12] || (u[12] = B((w) => s.$emit("copy-to-clipboard", e.account.otp.password), ["enter"])),
+                      style: _e({ lineHeight: e.preferences.showNextOtp ? "1rem" : "inherit" }),
+                      title: s.$t("tooltip.copy_to_clipboard")
+                    }, p(d(E)(
+                      e.account.otp.password,
+                      e.preferences.formatPassword,
+                      e.preferences.formatPasswordBy,
+                      e.preferences.showOtpAsDot,
+                      e.preferences.revealDottedOTP && k.value == e.account.id
+                    )), 47, Co),
+                    e.account.otp_type.includes("totp") ? (t(), a("div", {
+                      key: 0,
+                      class: "has-nowrap",
+                      style: _e({ lineHeight: e.preferences.showNextOtp ? "1rem" : "inherit" })
+                    }, [
+                      T(s.$slots, "dots")
+                    ], 4)) : f("", !0),
+                    e.preferences.showNextOtp ? (t(), a("div", Oo, [
+                      i("span", {
+                        class: c(["always-on-otp is-clickable has-nowrap has-text-grey is-size-7", o.nextOtpOpacityClass]),
+                        onClick: u[13] || (u[13] = (w) => s.$emit("copy-to-clipboard", e.account.otp.next_password)),
+                        onKeyup: u[14] || (u[14] = B((w) => s.$emit("copy-to-clipboard", e.account.otp.next_password), ["enter"])),
+                        title: s.$t("tooltip.copy_next_password")
+                      }, p(d(E)(
+                        e.account.otp.next_password,
+                        e.preferences.formatPassword,
+                        e.preferences.formatPasswordBy,
+                        e.preferences.showOtpAsDot,
+                        e.preferences.revealDottedOTP && k.value == e.account.id
+                      )), 43, Mo)
+                    ])) : f("", !0)
+                  ], 64)) : (t(), a("div", {
+                    key: 1,
+                    class: c({ "mt-5": e.preferences.displayMode == "grid" })
+                  }, [
+                    i("button", {
+                      type: "button",
+                      class: c(["button tag", n.value]),
+                      onClick: u[15] || (u[15] = (w) => s.$emit("show-otp", o.account)),
+                      title: s.$t("tooltip.import_this_account")
+                    }, p(s.$t("label.generate")), 11, To)
+                  ], 2))
+                ], 2), [
+                  [se, e.preferences.getOtpOnRequest == !1 && !e.inManagementMode]
+                ])
+              ]),
+              _: 3
+            })
+          ], 64)),
+          h(U, { name: "fadeInOut" }, {
+            default: $(() => [
+              e.inManagementMode && e.enableSharing && e.preferences.activeGroup == -2 ? (t(), a("div", Ao, [
+                e.account.is_shared ? (t(), O(M, {
+                  key: 0,
+                  to: { name: "shareAccount", params: { twofaccountId: e.account.id } },
+                  class: c(["tag is-rounded mr-1", n.value]),
+                  title: s.$t("tooltip.share_with_new_users")
+                }, {
+                  default: $(() => [
+                    h(d(Ce), { class: "icon-size-1" })
+                  ]),
+                  _: 1
+                }, 8, ["to", "class", "title"])) : f("", !0),
+                h(M, {
+                  to: { name: "accountSharing", params: { twofaccountId: e.account.id } },
+                  class: c(["tag is-rounded", n.value]),
+                  title: s.$t("tooltip.edit_sharing")
+                }, {
+                  default: $(() => [
+                    h(d(Oe), { class: "icon-size-1" })
+                  ]),
+                  _: 1
+                }, 8, ["to", "class", "title"])
+              ])) : e.inManagementMode && !e.account.is_borrowed ? (t(), a("div", xo, [
+                h(M, {
+                  to: { name: "editAccount", params: { twofaccountId: e.account.id } },
+                  class: c(["tag is-rounded mr-1", n.value])
+                }, {
+                  default: $(() => [
+                    S(p(s.$t("link.edit")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["to", "class"]),
+                h(M, {
+                  to: { name: "showQRcode", params: { twofaccountId: e.account.id } },
+                  class: c(["tag is-rounded mr-1", n.value]),
+                  title: s.$t("tooltip.show_qrcode")
+                }, {
+                  default: $(() => [
+                    h(d(Me), { class: "icon-size-1" })
+                  ]),
+                  _: 1
+                }, 8, ["to", "class", "title"]),
+                h(M, {
+                  to: { name: "otpLogs", params: { twofaccountId: e.account.id } },
+                  class: c(["tag is-rounded", n.value]),
+                  title: s.$t("link.otp_generation_log")
+                }, {
+                  default: $(() => [
+                    h(d(Te), { class: "icon-size-1" })
+                  ]),
+                  _: 1
+                }, 8, ["to", "class", "title"])
+              ])) : f("", !0)
+            ]),
+            _: 1
+          }),
+          h(U, { name: "fadeInOut" }, {
+            default: $(() => [
+              e.inManagementMode ? (t(), a("div", zo, [
+                h(d(ce))
+              ])) : f("", !0)
+            ]),
+            _: 1
+          }),
+          h(U, { name: "popLater" }, {
+            default: $(() => [
+              e.enableSharing && e.preferences.getOtpOnRequest == !1 && !e.inManagementMode && !e.account.is_borrowed ? (t(), a("div", {
+                key: 0,
+                class: c(["tfa-cell has-text-grey-dark is-clickable", e.preferences.displayMode == "grid" ? "mt-4" : "ml-4"]),
+                style: { "min-width": "20px" }
+              }, [
+                g.value == null || g.value != e.account.id ? (t(), a("button", {
+                  key: 0,
+                  onClick: u[16] || (u[16] = (w) => g.value = e.account.id),
+                  class: c(["button is-ghost p-0 has-text-grey-dark", e.colorScheme == "dark" ? "has-text-grey-dark" : "has-text-grey-light"])
+                }, [
+                  h(d(lt))
+                ], 2)) : f("", !0),
+                g.value == e.account.id ? (t(), a("button", {
+                  key: 1,
+                  onClick: u[17] || (u[17] = (w) => g.value = null),
+                  class: c(["button is-ghost p-0", e.colorScheme == "dark" ? "has-text-grey-dark" : "has-text-grey-light"])
+                }, [
+                  h(d(rt))
+                ], 2)) : f("", !0)
+              ], 2)) : f("", !0)
+            ]),
+            _: 1
+          })
+        ])
+      ], 2));
+    };
+  }
+}, pa = {
+  key: 1,
+  class: "main"
+}, La = {
+  __name: "VueFooter",
+  setup(o) {
+    const m = ee("2fauth", {
+      context: "webapp",
+      version: "x.y.z",
+      config: {
+        proxyAuth: !1,
+        proxyLogoutUrl: null
+      }
+    }), r = x(!1);
+    return (v, e) => (t(), a(A, null, [
+      r.value == !0 ? (t(), a("div", {
+        key: 0,
+        onClick: e[0] || (e[0] = (k) => r.value = !1),
+        class: "footer-overlay"
+      })) : f("", !0),
+      d(m).context == "webext" ? (t(), a("footer", pa, [
+        h(fe, null, {
+          default: $(() => [
+            T(v.$slots, "default")
+          ]),
+          submenu: $(() => [
+            T(v.$slots, "submenu")
+          ]),
+          subpart: $(() => [
+            T(v.$slots, "subpart")
+          ]),
+          _: 3
+        })
+      ])) : d(m).context == "webapp" ? (t(), a("footer", {
+        key: 2,
+        class: c(["main", { menu: r.value }])
+      }, [
+        h(fe, {
+          "show-menu": r.value,
+          "onUpdate:showMenu": e[1] || (e[1] = (k) => r.value = k)
+        }, {
+          default: $(() => [
+            T(v.$slots, "default")
+          ]),
+          submenu: $(() => [
+            T(v.$slots, "submenu")
+          ]),
+          subpart: $(() => [
+            T(v.$slots, "subpart")
+          ]),
+          _: 3
+        }, 8, ["show-menu"])
+      ], 2)) : f("", !0)
+    ], 64));
+  }
 };
 export {
-  Ie as Dots,
-  Fe as DotsController,
-  ys as FormWrapper,
-  _s as GroupSwitch,
-  gs as Kicker,
-  ks as LucideGenericIcon,
-  $s as Modal,
-  ws as OtpDisplay,
-  es as ResponsiveWidthWrapper,
-  bs as SearchBox,
-  Kt as Spinner,
-  Ss as TabBar,
-  me as VueFooter,
-  xt as useNotify,
-  pe as useVisiblePassword
+  yt as Dots,
+  mt as DotsController,
+  ba as FormWrapper,
+  wa as GroupCallToSwitch,
+  $a as GroupChips,
+  _a as GroupSwitch,
+  Sa as Kicker,
+  Vt as LucideGenericIcon,
+  Ca as Modal,
+  Oa as OtpDisplay,
+  Ma as QrContentDisplay,
+  qs as ResponsiveWidthWrapper,
+  Ta as SearchBox,
+  Ts as Spinner,
+  Aa as StackLayout,
+  xa as TabBar,
+  za as TwoFAccountList,
+  Pa as TwoFAccountListItem,
+  La as VueFooter,
+  fe as VueFooterContent,
+  Be as useNotify,
+  E as useVisiblePassword
 };
diff --git a/packages/ui/src/VueFooterContent/VueFooterContent.story.vue b/packages/ui/src/VueFooterContent/VueFooterContent.story.vue
index 132a0de..4c53bc6 100644
--- a/packages/ui/src/VueFooterContent/VueFooterContent.story.vue
+++ b/packages/ui/src/VueFooterContent/VueFooterContent.story.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
     import { reactive } from 'vue'
     import { createRouter, createMemoryHistory } from 'vue-router'
-    import VueFooter from './VueFooter.vue'
+    import VueFooter from './VueFooterContent.vue'
     
     function setupApp ({ app }) {
         const user = reactive({
@@ -63,4 +63,4 @@
             </VueFooter>
         </Variant>
     </Story>
-</template>
\ No newline at end of file
+</template>