@strands.gg/accui 1.1.4 → 1.2.1

package/dist/strands-auth-ui.cjs.js

@@ -1476,37 +1476,37 @@ const _hoisted_14$9 = { class: "flex items-center space-x-3" };
 const _hoisted_15$9 = { class: "text-2xl" };
 const _hoisted_16$8 = { class: "font-medium text-gray-900" };
 const _hoisted_17$7 = { class: "text-sm text-gray-500" };
-const _hoisted_18$5 = {
+const _hoisted_18$6 = {
   key: 2,
   class: "text-center"
 };
-const _hoisted_19$3 = {
+const _hoisted_19$5 = {
   key: 3,
   class: "text-center space-y-4"
 };
-const _hoisted_20$2 = {
+const _hoisted_20$3 = {
   key: 4,
   class: "space-y-4"
 };
-const _hoisted_21$2 = {
+const _hoisted_21$3 = {
   key: 0,
   class: "bg-green-50 border border-green-200 rounded-lg p-4"
 };
-const _hoisted_22$2 = {
+const _hoisted_22$3 = {
   key: 1,
   class: "text-sm text-gray-600"
 };
-const _hoisted_23$1 = {
+const _hoisted_23$2 = {
   key: 2,
   class: "flex justify-between text-sm"
 };
-const _hoisted_24$1 = ["disabled"];
-const _hoisted_25$1 = { class: "pt-4 border-t border-gray-200" };
-const _hoisted_26$1 = {
+const _hoisted_24$2 = ["disabled"];
+const _hoisted_25$2 = { class: "pt-4 border-t border-gray-200" };
+const _hoisted_26$2 = {
   key: 3,
   class: "space-y-4"
 };
-const _hoisted_27$1 = { class: "flex justify-between" };
+const _hoisted_27$2 = { class: "flex justify-between" };
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock($setup["UiModal"], {
     open: $props.show,
@@ -1525,7 +1525,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       )
     ])),
     footer: vue.withCtx(() => [
-      vue.createElementVNode("div", _hoisted_27$1, [
+      vue.createElementVNode("div", _hoisted_27$2, [
         vue.createVNode($setup["StrandsUiButton"], {
           variant: "secondary",
           onClick: $setup.closeModal,
@@ -1684,7 +1684,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" Email MFA Code Request "),
-              $setup.selectedMethod?.device_type === "email" && !$setup.emailCodeSent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$5, [
+              $setup.selectedMethod?.device_type === "email" && !$setup.emailCodeSent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$6, [
                 _cache[8] || (_cache[8] = vue.createElementVNode(
                   "p",
                   { class: "text-sm text-gray-600 mb-4" },
@@ -1710,7 +1710,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 8, ["disabled", "loading"])
               ])) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" Hardware Key Authentication "),
-              $setup.selectedMethod?.device_type === "hardware" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19$3, [
+              $setup.selectedMethod?.device_type === "hardware" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19$5, [
                 _cache[10] || (_cache[10] = vue.createElementVNode(
                   "div",
                   { class: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
@@ -1758,9 +1758,9 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 8, ["disabled", "loading"])
               ])) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" Code Input "),
-              $setup.selectedMethod && $setup.selectedMethod.device_type !== "hardware" && ($setup.selectedMethod.device_type !== "email" || $setup.emailCodeSent) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$2, [
+              $setup.selectedMethod && $setup.selectedMethod.device_type !== "hardware" && ($setup.selectedMethod.device_type !== "email" || $setup.emailCodeSent) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$3, [
                 vue.createCommentVNode(" Email confirmation "),
-                $setup.selectedMethod.device_type === "email" && $setup.emailCodeSent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$2, _cache[11] || (_cache[11] = [
+                $setup.selectedMethod.device_type === "email" && $setup.emailCodeSent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$3, _cache[11] || (_cache[11] = [
                   vue.createElementVNode(
                     "div",
                     { class: "flex items-start space-x-2" },
@@ -1801,28 +1801,28 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 vue.createCommentVNode(" TOTP Help "),
                 $setup.selectedMethod.device_type === "totp" ? (vue.openBlock(), vue.createElementBlock(
                   "div",
-                  _hoisted_22$2,
+                  _hoisted_22$3,
                   ' Open your authenticator app and enter the 6-digit code for "' + vue.toDisplayString($setup.selectedMethod.device_name) + '" ',
                   1
                   /* TEXT */
                 )) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" Email Resend "),
-                $setup.selectedMethod.device_type === "email" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_23$1, [
+                $setup.selectedMethod.device_type === "email" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_23$2, [
                   vue.createElementVNode("button", {
                     onClick: $setup.sendEmailCode,
                     disabled: $setup.loading || $setup.cooldownActive,
                     class: "text-strands-600 hover:text-strands-800 disabled:text-gray-400 disabled:cursor-not-allowed"
-                  }, vue.toDisplayString($setup.cooldownActive ? `Resend in ${$setup.cooldownSeconds}s` : "Resend Code"), 9, _hoisted_24$1)
+                  }, vue.toDisplayString($setup.cooldownActive ? `Resend in ${$setup.cooldownSeconds}s` : "Resend Code"), 9, _hoisted_24$2)
                 ])) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" Backup Codes Option "),
-                vue.createElementVNode("div", _hoisted_25$1, [
+                vue.createElementVNode("div", _hoisted_25$2, [
                   vue.createElementVNode("button", {
                     onClick: _cache[1] || (_cache[1] = ($event) => $setup.showBackupCodeInput = !$setup.showBackupCodeInput),
                     class: "text-sm text-gray-600 hover:text-gray-800 underline"
                   }, " Use backup code instead ")
                 ]),
                 vue.createCommentVNode(" Backup Code Input "),
-                $setup.showBackupCodeInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26$1, [
+                $setup.showBackupCodeInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26$2, [
                   vue.createVNode($setup["StrandsUiInput"], {
                     modelValue: $setup.backupCode,
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.backupCode = $event),
@@ -3245,11 +3245,11 @@ const _hoisted_15$6 = {
 };
 const _hoisted_16$5 = { class: "alert-error" };
 const _hoisted_17$5 = { class: "flex items-start gap-3" };
-const _hoisted_18$4 = { class: "font-medium" };
-const _hoisted_19$2 = { class: "mt-8 text-center" };
-const _hoisted_20$1 = { class: "text-sm text-neutral-600" };
-const _hoisted_21$1 = { key: 0 };
-const _hoisted_22$1 = { class: "text-neutral-400 text-sm" };
+const _hoisted_18$5 = { class: "font-medium" };
+const _hoisted_19$4 = { class: "mt-8 text-center" };
+const _hoisted_20$2 = { class: "text-sm text-neutral-600" };
+const _hoisted_21$2 = { key: 0 };
+const _hoisted_22$2 = { class: "text-neutral-400 text-sm" };
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
     vue.createCommentVNode(" Success State "),
@@ -3502,7 +3502,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
                   )),
                   vue.createElementVNode(
                     "p",
-                    _hoisted_18$4,
+                    _hoisted_18$5,
                     vue.toDisplayString($setup.error),
                     1
                     /* TEXT */
@@ -3511,8 +3511,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ])) : vue.createCommentVNode("v-if", true),
             vue.createCommentVNode(" Sign in link "),
-            vue.createElementVNode("div", _hoisted_19$2, [
-              vue.createElementVNode("p", _hoisted_20$1, [
+            vue.createElementVNode("div", _hoisted_19$4, [
+              vue.createElementVNode("p", _hoisted_20$2, [
                 _cache[10] || (_cache[10] = vue.createTextVNode(
                   " Already have an account? ",
                   -1
@@ -3531,8 +3531,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: vue.withCtx(() => [
                 vue.createCommentVNode(" Need help "),
-                $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$1, [
-                  vue.createElementVNode("p", _hoisted_22$1, [
+                $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$2, [
+                  vue.createElementVNode("p", _hoisted_22$2, [
                     _cache[12] || (_cache[12] = vue.createTextVNode(
                       " Need help? ",
                       -1
@@ -4122,6 +4122,173 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   );
 }
 const StrandsCompleteSignUp = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__file", "/home/runner/work/strands-accounts/strands-accounts/apps/accounts-ui/src/vue/components/StrandsCompleteSignUp.vue"]]);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const isEmptyString = (value) => value === "";
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Icon = ({
+  name,
+  iconNode,
+  absoluteStrokeWidth,
+  "absolute-stroke-width": absoluteStrokeWidthKebabCase,
+  strokeWidth,
+  "stroke-width": strokeWidthKebabCase,
+  size = defaultAttributes.width,
+  color = defaultAttributes.stroke,
+  ...props
+}, { slots }) => {
+  return vue.h(
+    "svg",
+    {
+      ...defaultAttributes,
+      ...props,
+      width: size,
+      height: size,
+      stroke: color,
+      "stroke-width": isEmptyString(absoluteStrokeWidth) || isEmptyString(absoluteStrokeWidthKebabCase) || absoluteStrokeWidth === true || absoluteStrokeWidthKebabCase === true ? Number(strokeWidth || strokeWidthKebabCase || defaultAttributes["stroke-width"]) * 24 / Number(size) : strokeWidth || strokeWidthKebabCase || defaultAttributes["stroke-width"],
+      class: mergeClasses(
+        "lucide",
+        props.class,
+        ...name ? [`lucide-${toKebabCase(toPascalCase(name))}-icon`, `lucide-${toKebabCase(name)}`] : ["lucide-icon"]
+      )
+    },
+    [...iconNode.map((child) => vue.h(...child)), ...slots.default ? [slots.default()] : []]
+  );
+};
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createLucideIcon = (iconName, iconNode) => (props, { slots, attrs }) => vue.h(
+  Icon,
+  {
+    ...attrs,
+    ...props,
+    iconNode,
+    name: iconName
+  },
+  slots
+);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const KeyRound = createLucideIcon("key-round", [
+  [
+    "path",
+    {
+      d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z",
+      key: "1s6t7t"
+    }
+  ],
+  ["circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor", key: "w0ekpg" }]
+]);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Mail = createLucideIcon("mail", [
+  ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
+  ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
+]);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Settings = createLucideIcon("settings", [
+  [
+    "path",
+    {
+      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+      key: "1i5ecw"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+]);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Shield = createLucideIcon("shield", [
+  [
+    "path",
+    {
+      d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",
+      key: "oel41y"
+    }
+  ]
+]);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Smartphone = createLucideIcon("smartphone", [
+  ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }]
+]);
+/**
+ * @license lucide-vue-next v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Trash2 = createLucideIcon("trash-2", [
+  ["path", { d: "M10 11v6", key: "nco0om" }],
+  ["path", { d: "M14 11v6", key: "outv1u" }],
+  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
+]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -6392,8 +6559,8 @@ const _hoisted_14$5 = {
 const _hoisted_15$5 = { class: "bg-red-50 border border-red-200 rounded-lg p-4" };
 const _hoisted_16$4 = { class: "bg-white rounded border p-3" };
 const _hoisted_17$4 = { class: "grid grid-cols-2 gap-2 text-sm font-mono text-gray-900" };
-const _hoisted_18$3 = { class: "flex justify-center mt-3" };
-const _hoisted_19$1 = { class: "flex justify-end pt-4" };
+const _hoisted_18$4 = { class: "flex justify-center mt-3" };
+const _hoisted_19$3 = { class: "flex justify-end pt-4" };
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock($setup["UiModal"], {
     open: $props.show,
@@ -6716,7 +6883,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
               ))
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_18$3, [
+          vue.createElementVNode("div", _hoisted_18$4, [
             vue.createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
               size: "sm",
@@ -6734,7 +6901,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
             })
           ])
         ]),
-        vue.createElementVNode("div", _hoisted_19$1, [
+        vue.createElementVNode("div", _hoisted_19$3, [
           vue.createVNode($setup["StrandsUiButton"], {
             variant: "primary",
             onClick: $setup.finish
@@ -7426,7 +7593,7 @@ const _hoisted_15$4 = {
 };
 const _hoisted_16$3 = { class: "text-center" };
 const _hoisted_17$3 = { class: "text-sm text-gray-600 mb-6" };
-const _hoisted_18$2 = { class: "flex justify-end space-x-3 pt-4" };
+const _hoisted_18$3 = { class: "flex justify-end space-x-3 pt-4" };
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock($setup["UiModal"], {
     open: $props.show,
@@ -7824,7 +7991,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
             /* TEXT */
           )
         ]),
-        vue.createElementVNode("div", _hoisted_18$2, [
+        vue.createElementVNode("div", _hoisted_18$3, [
           vue.createVNode($setup["StrandsUiButton"], {
             variant: "secondary",
             onClick: _cache[2] || (_cache[2] = ($event) => $setup.step = 1)
@@ -8386,6 +8553,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       formatLastUsed
     } = useStrandsMfa();
     const showModal = vue.computed(() => props.show);
+    const activeTab = vue.ref("add");
     const showTotpSetup = vue.ref(false);
     const showEmailMfaSetup = vue.ref(false);
     const showHardwareKeySetup = vue.ref(false);
@@ -8445,16 +8613,19 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const handleTotpSetupSuccess = async () => {
       showTotpSetup.value = false;
       await fetchMfaDevices();
+      activeTab.value = "manage";
       emit("mfa-updated");
     };
     const handleEmailMfaSetupSuccess = async () => {
       showEmailMfaSetup.value = false;
       await fetchMfaDevices();
+      activeTab.value = "manage";
       emit("mfa-updated");
     };
     const handleHardwareKeySetupSuccess = async () => {
       showHardwareKeySetup.value = false;
       await fetchMfaDevices();
+      activeTab.value = "manage";
       emit("mfa-updated");
     };
     const getDeviceIconBackground = (deviceType) => {
@@ -8470,10 +8641,33 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
           return "bg-gray-50 group-hover:bg-gray-100";
       }
     };
-    const __returned__ = { props, emit, mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, mfaLoading, activeMfaDevices, fetchMfaDevices, disableMfaDevice, sendEmailMfaCode, getDeviceTypeIcon, getDeviceTypeName, formatLastUsed, showModal, showTotpSetup, showEmailMfaSetup, showHardwareKeySetup, showBackupCodesModal, showConfirmDisable, selectedDevice, closeModal, startTotpSetup, startEmailMfaSetup, startHardwareKeySetup, showBackupCodes, testEmailMfa, confirmDisableDevice, handleDisableDevice, handleTotpSetupSuccess, handleEmailMfaSetupSuccess, handleHardwareKeySetupSuccess, getDeviceIconBackground, get StrandsUiButton() {
+    const getDeviceIconComponent = (deviceType) => {
+      switch (deviceType) {
+        case "totp":
+          return Smartphone;
+        case "email":
+          return Mail;
+        case "hardware":
+        case "passkey":
+          return KeyRound;
+        default:
+          return Shield;
+      }
+    };
+    const __returned__ = { props, emit, mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, mfaLoading, activeMfaDevices, fetchMfaDevices, disableMfaDevice, sendEmailMfaCode, getDeviceTypeIcon, getDeviceTypeName, formatLastUsed, showModal, activeTab, showTotpSetup, showEmailMfaSetup, showHardwareKeySetup, showBackupCodesModal, showConfirmDisable, selectedDevice, closeModal, startTotpSetup, startEmailMfaSetup, startHardwareKeySetup, showBackupCodes, testEmailMfa, confirmDisableDevice, handleDisableDevice, handleTotpSetupSuccess, handleEmailMfaSetupSuccess, handleHardwareKeySetupSuccess, getDeviceIconBackground, getDeviceIconComponent, get StrandsUiButton() {
       return StrandsUiButton;
     }, get StrandsUiLoader() {
       return StrandsUiLoader;
+    }, get Smartphone() {
+      return Smartphone;
+    }, get Mail() {
+      return Mail;
+    }, get KeyRound() {
+      return KeyRound;
+    }, get Shield() {
+      return Shield;
+    }, get Trash2() {
+      return Trash2;
     }, UiModal, StrandsTotpSetupModal, StrandsEmailMfaSetupModal, StrandsHardwareKeySetupModal, StrandsBackupCodesModal, StrandsConfirmModal };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -8496,15 +8690,34 @@ const _hoisted_8$2 = {
   key: 1,
   class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600"
 };
-const _hoisted_9$2 = { key: 0 };
-const _hoisted_10$2 = { class: "space-y-3" };
-const _hoisted_11$2 = { class: "flex items-center space-x-3" };
-const _hoisted_12$2 = { class: "text-xl" };
-const _hoisted_13$2 = { class: "min-w-0 flex-1" };
-const _hoisted_14$2 = { class: "font-medium text-gray-900 text-sm" };
-const _hoisted_15$2 = { class: "text-xs text-gray-500 mt-0.5" };
-const _hoisted_16$2 = { class: "flex items-center space-x-2" };
-const _hoisted_17$2 = { class: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4" };
+const _hoisted_9$2 = { class: "border-b border-gray-200" };
+const _hoisted_10$2 = {
+  class: "-mb-px flex space-x-8",
+  "aria-label": "Tabs"
+};
+const _hoisted_11$2 = {
+  key: 0,
+  class: "space-y-6"
+};
+const _hoisted_12$2 = { class: "space-y-4" };
+const _hoisted_13$2 = { class: "flex items-center justify-between" };
+const _hoisted_14$2 = { class: "flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
+const _hoisted_15$2 = { class: "flex flex-col space-y-2 ml-4" };
+const _hoisted_16$2 = { class: "flex items-center justify-between" };
+const _hoisted_17$2 = { class: "flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
+const _hoisted_18$2 = { class: "flex flex-col space-y-2 ml-4" };
+const _hoisted_19$2 = { class: "flex items-center justify-between" };
+const _hoisted_20$1 = { class: "flex-shrink-0 w-14 h-14 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
+const _hoisted_21$1 = { class: "flex flex-col space-y-2 ml-4" };
+const _hoisted_22$1 = { class: "space-y-6" };
+const _hoisted_23$1 = { class: "max-h-96 overflow-y-auto space-y-4 pr-2" };
+const _hoisted_24$1 = { class: "flex items-start justify-between" };
+const _hoisted_25$1 = { class: "flex items-start space-x-4" };
+const _hoisted_26$1 = { class: "min-w-0 flex-1" };
+const _hoisted_27$1 = { class: "font-semibold text-gray-900 text-lg" };
+const _hoisted_28$1 = { class: "text-sm text-gray-600 mt-1" };
+const _hoisted_29$1 = { class: "text-xs text-gray-500 mt-2" };
+const _hoisted_30$1 = { class: "flex flex-col space-y-2 ml-4" };
 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock(
     vue.Fragment,
@@ -8513,11 +8726,11 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createVNode($setup["UiModal"], {
         open: $setup.showModal,
         onClose: $setup.closeModal,
-        "card-class": "max-w-lg"
+        "card-class": "max-w-4xl"
       }, {
         header: vue.withCtx(() => [
           vue.createElementVNode("div", { class: "flex items-center justify-between" }, [
-            _cache[6] || (_cache[6] = vue.createElementVNode(
+            _cache[8] || (_cache[8] = vue.createElementVNode(
               "h2",
               { class: "text-2xl font-bold text-gray-900" },
               "Two-Factor Authentication",
@@ -8527,7 +8740,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createElementVNode("button", {
               onClick: $setup.closeModal,
               class: "text-gray-400 hover:text-gray-600 transition-colors duration-200"
-            }, _cache[5] || (_cache[5] = [
+            }, _cache[7] || (_cache[7] = [
               vue.createElementVNode(
                 "svg",
                 {
@@ -8553,7 +8766,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
         default: vue.withCtx(() => [
           $setup.mfaLoading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
             vue.createVNode($setup["StrandsUiLoader"], { size: 32 }),
-            _cache[7] || (_cache[7] = vue.createElementVNode(
+            _cache[9] || (_cache[9] = vue.createElementVNode(
               "span",
               { class: "ml-3 text-gray-600" },
               "Loading MFA settings...",
@@ -8564,13 +8777,13 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
             vue.Fragment,
             { key: 1 },
             [
-              vue.createCommentVNode(" Content when loaded "),
+              vue.createCommentVNode(" Tab Navigation "),
               vue.createElementVNode("div", _hoisted_2$5, [
                 vue.createCommentVNode(" MFA Status Overview "),
                 vue.createElementVNode("div", _hoisted_3$5, [
                   vue.createElementVNode("div", _hoisted_4$4, [
                     vue.createElementVNode("div", null, [
-                      _cache[8] || (_cache[8] = vue.createElementVNode(
+                      _cache[10] || (_cache[10] = vue.createElementVNode(
                         "h3",
                         { class: "font-semibold text-gray-900" },
                         "Two-Factor Authentication",
@@ -8586,251 +8799,341 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                       )
                     ]),
                     vue.createElementVNode("div", _hoisted_6$2, [
-                      $setup.mfaEnabled ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$2, " ✓ Enabled ")) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$2, " Not Enabled "))
+                      $setup.mfaEnabled ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$2, [
+                        vue.createVNode($setup["Shield"], {
+                          size: 12,
+                          class: "mr-1"
+                        }),
+                        _cache[11] || (_cache[11] = vue.createTextVNode(
+                          " Enabled ",
+                          -1
+                          /* CACHED */
+                        ))
+                      ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$2, " Not Enabled "))
                     ])
                   ])
                 ]),
-                vue.createCommentVNode(" Active Devices "),
-                $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
-                  _cache[12] || (_cache[12] = vue.createElementVNode(
-                    "h3",
-                    { class: "text-lg font-semibold text-gray-900 mb-4" },
-                    "Active Devices",
-                    -1
-                    /* CACHED */
-                  )),
-                  vue.createElementVNode("div", _hoisted_10$2, [
-                    (vue.openBlock(true), vue.createElementBlock(
-                      vue.Fragment,
-                      null,
-                      vue.renderList($setup.activeMfaDevices, (device) => {
-                        return vue.openBlock(), vue.createElementBlock("div", {
-                          key: device.id,
-                          class: "group flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-md transition-all duration-200"
-                        }, [
-                          vue.createElementVNode("div", _hoisted_11$2, [
-                            vue.createElementVNode(
-                              "div",
-                              {
-                                class: vue.normalizeClass(["flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center", $setup.getDeviceIconBackground(device.device_type)])
-                              },
-                              [
-                                vue.createElementVNode(
-                                  "span",
-                                  _hoisted_12$2,
-                                  vue.toDisplayString($setup.getDeviceTypeIcon(device.device_type)),
-                                  1
-                                  /* TEXT */
-                                )
-                              ],
-                              2
-                              /* CLASS */
-                            ),
-                            vue.createElementVNode("div", _hoisted_13$2, [
-                              vue.createElementVNode(
-                                "h4",
-                                _hoisted_14$2,
-                                vue.toDisplayString(device.device_name),
-                                1
-                                /* TEXT */
-                              ),
-                              vue.createElementVNode(
-                                "p",
-                                _hoisted_15$2,
-                                vue.toDisplayString($setup.getDeviceTypeName(device.device_type)) + " • Last used " + vue.toDisplayString($setup.formatLastUsed(device.last_used_at)),
-                                1
-                                /* TEXT */
-                              )
-                            ])
+                vue.createCommentVNode(" Tab Navigation "),
+                vue.createElementVNode("div", _hoisted_9$2, [
+                  vue.createElementVNode("nav", _hoisted_10$2, [
+                    vue.createElementVNode(
+                      "button",
+                      {
+                        onClick: _cache[0] || (_cache[0] = ($event) => $setup.activeTab = "add"),
+                        class: vue.normalizeClass([
+                          $setup.activeTab === "add" ? "border-[var(--strands-primary)] text-[var(--strands-primary)]" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                          "whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors"
+                        ])
+                      },
+                      " Add New Device ",
+                      2
+                      /* CLASS */
+                    ),
+                    $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock(
+                      "button",
+                      {
+                        key: 0,
+                        onClick: _cache[1] || (_cache[1] = ($event) => $setup.activeTab = "manage"),
+                        class: vue.normalizeClass([
+                          $setup.activeTab === "manage" ? "border-[var(--strands-primary)] text-[var(--strands-primary)]" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                          "whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors"
+                        ])
+                      },
+                      " Active Devices (" + vue.toDisplayString($setup.activeMfaDevices.length) + ") ",
+                      3
+                      /* TEXT, CLASS */
+                    )) : vue.createCommentVNode("v-if", true)
+                  ])
+                ]),
+                vue.createCommentVNode(" Tab Content: Add New Device "),
+                $setup.activeTab === "add" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$2, [
+                  vue.createElementVNode("div", null, [
+                    _cache[18] || (_cache[18] = vue.createElementVNode(
+                      "h3",
+                      { class: "text-xl font-semibold text-gray-900 mb-6" },
+                      "Choose Your Authentication Method",
+                      -1
+                      /* CACHED */
+                    )),
+                    vue.createElementVNode("div", _hoisted_12$2, [
+                      vue.createCommentVNode(" TOTP Setup "),
+                      vue.createElementVNode("div", {
+                        class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer",
+                        onClick: $setup.startTotpSetup
+                      }, [
+                        vue.createElementVNode("div", _hoisted_13$2, [
+                          vue.createElementVNode("div", _hoisted_14$2, [
+                            vue.createVNode($setup["Smartphone"], {
+                              size: 24,
+                              class: "text-[var(--strands-primary)]"
+                            })
                           ]),
-                          vue.createElementVNode("div", _hoisted_16$2, [
-                            vue.createCommentVNode(" Backup codes button for TOTP and Hardware Key devices "),
-                            device.device_type === "totp" || device.device_type === "hardware" ? (vue.openBlock(), vue.createBlock($setup["StrandsUiButton"], {
-                              key: 0,
-                              variant: "secondary",
-                              size: "sm",
-                              onClick: ($event) => $setup.showBackupCodes(device),
+                          _cache[13] || (_cache[13] = vue.createElementVNode(
+                            "div",
+                            { class: "flex items-start space-x-4" },
+                            [
+                              vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
+                                vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Authenticator App"),
+                                vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Use Google Authenticator, Authy, or any TOTP-compatible app to generate secure codes ")
+                              ])
+                            ],
+                            -1
+                            /* CACHED */
+                          )),
+                          vue.createElementVNode("div", _hoisted_15$2, [
+                            vue.createVNode($setup["StrandsUiButton"], {
+                              variant: "primary",
+                              size: "md",
+                              onClick: vue.withModifiers($setup.startTotpSetup, ["stop"]),
                               disabled: $setup.mfaLoading
                             }, {
-                              default: vue.withCtx(() => [..._cache[9] || (_cache[9] = [
+                              default: vue.withCtx(() => _cache[12] || (_cache[12] = [
                                 vue.createTextVNode(
-                                  " Backup Codes ",
+                                  " Setup ",
                                   -1
                                   /* CACHED */
                                 )
-                              ])]),
-                              _: 2,
-                              __: [9]
-                            }, 1032, ["onClick", "disabled"])) : vue.createCommentVNode("v-if", true),
-                            vue.createCommentVNode(" Test email MFA "),
-                            device.device_type === "email" ? (vue.openBlock(), vue.createBlock($setup["StrandsUiButton"], {
-                              key: 1,
-                              variant: "secondary",
-                              size: "sm",
-                              onClick: ($event) => $setup.testEmailMfa(device),
+                              ])),
+                              _: 1,
+                              __: [12]
+                            }, 8, ["disabled"])
+                          ])
+                        ])
+                      ]),
+                      vue.createCommentVNode(" Email MFA Setup "),
+                      vue.createElementVNode("div", {
+                        class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer",
+                        onClick: $setup.startEmailMfaSetup
+                      }, [
+                        vue.createElementVNode("div", _hoisted_16$2, [
+                          vue.createElementVNode("div", _hoisted_17$2, [
+                            vue.createVNode($setup["Mail"], {
+                              size: 24,
+                              class: "text-[var(--strands-primary)]"
+                            })
+                          ]),
+                          _cache[15] || (_cache[15] = vue.createElementVNode(
+                            "div",
+                            { class: "flex items-start space-x-4" },
+                            [
+                              vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
+                                vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Email Verification"),
+                                vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Receive verification codes directly in your email inbox for easy access ")
+                              ])
+                            ],
+                            -1
+                            /* CACHED */
+                          )),
+                          vue.createElementVNode("div", _hoisted_18$2, [
+                            vue.createVNode($setup["StrandsUiButton"], {
+                              variant: "primary",
+                              size: "md",
+                              onClick: vue.withModifiers($setup.startEmailMfaSetup, ["stop"]),
                               disabled: $setup.mfaLoading
                             }, {
-                              default: vue.withCtx(() => [..._cache[10] || (_cache[10] = [
+                              default: vue.withCtx(() => _cache[14] || (_cache[14] = [
                                 vue.createTextVNode(
-                                  " Send Test Code ",
+                                  " Setup ",
                                   -1
                                   /* CACHED */
                                 )
-                              ])]),
-                              _: 2,
-                              __: [10]
-                            }, 1032, ["onClick", "disabled"])) : vue.createCommentVNode("v-if", true),
-                            vue.createCommentVNode(" Remove device "),
+                              ])),
+                              _: 1,
+                              __: [14]
+                            }, 8, ["disabled"])
+                          ])
+                        ])
+                      ]),
+                      vue.createCommentVNode(" Hardware Key & Passkeys Setup "),
+                      vue.createElementVNode("div", {
+                        class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer",
+                        onClick: $setup.startHardwareKeySetup
+                      }, [
+                        vue.createElementVNode("div", _hoisted_19$2, [
+                          vue.createElementVNode("div", _hoisted_20$1, [
+                            vue.createVNode($setup["KeyRound"], {
+                              size: 24,
+                              class: "text-[var(--strands-primary)]"
+                            })
+                          ]),
+                          _cache[17] || (_cache[17] = vue.createElementVNode(
+                            "div",
+                            { class: "flex items-start space-x-4" },
+                            [
+                              vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
+                                vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Hardware Key & Passkeys"),
+                                vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Use YubiKey, FIDO2 devices, WebAuthn, or built-in passkeys for maximum security ")
+                              ])
+                            ],
+                            -1
+                            /* CACHED */
+                          )),
+                          vue.createElementVNode("div", _hoisted_21$1, [
                             vue.createVNode($setup["StrandsUiButton"], {
-                              variant: "secondary",
-                              size: "sm",
-                              onClick: ($event) => $setup.confirmDisableDevice(device),
+                              variant: "primary",
+                              size: "md",
+                              onClick: vue.withModifiers($setup.startHardwareKeySetup, ["stop"]),
                               disabled: $setup.mfaLoading
                             }, {
-                              default: vue.withCtx(() => [..._cache[11] || (_cache[11] = [
+                              default: vue.withCtx(() => _cache[16] || (_cache[16] = [
                                 vue.createTextVNode(
-                                  " Remove ",
+                                  " Setup ",
                                   -1
                                   /* CACHED */
                                 )
-                              ])]),
-                              _: 2,
-                              __: [11]
-                            }, 1032, ["onClick", "disabled"])
+                              ])),
+                              _: 1,
+                              __: [16]
+                            }, 8, ["disabled"])
                           ])
-                        ]);
-                      }),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
+                        ])
+                      ])
+                    ])
                   ])
-                ])) : vue.createCommentVNode("v-if", true),
-                vue.createCommentVNode(" Add New Device "),
-                vue.createElementVNode("div", null, [
-                  _cache[19] || (_cache[19] = vue.createElementVNode(
-                    "h3",
-                    { class: "text-lg font-semibold text-gray-900 mb-4" },
-                    "Add New Device",
-                    -1
-                    /* CACHED */
-                  )),
-                  vue.createElementVNode("div", _hoisted_17$2, [
-                    vue.createCommentVNode(" TOTP Setup "),
-                    vue.createElementVNode("div", {
-                      class: "group p-3 sm:p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer active:scale-[0.98] touch-manipulation",
-                      onClick: $setup.startTotpSetup
-                    }, [
-                      _cache[14] || (_cache[14] = vue.createElementVNode(
-                        "div",
-                        { class: "flex items-center space-x-3 mb-3" },
-                        [
-                          vue.createElementVNode("div", { class: "flex-shrink-0 w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center group-hover:bg-blue-100 transition-colors duration-200" }, [
-                            vue.createElementVNode("span", { class: "text-xl" }, "📱")
-                          ]),
-                          vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                            vue.createElementVNode("h4", { class: "font-medium text-gray-900 text-sm" }, "Authenticator App"),
-                            vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "Google Authenticator, Authy, etc.")
-                          ])
-                        ],
-                        -1
-                        /* CACHED */
-                      )),
-                      vue.createVNode($setup["StrandsUiButton"], {
-                        variant: "primary",
-                        size: "sm",
-                        onClick: vue.withModifiers($setup.startTotpSetup, ["stop"]),
-                        disabled: $setup.mfaLoading,
-                        class: "w-full"
-                      }, {
-                        default: vue.withCtx(() => _cache[13] || (_cache[13] = [
-                          vue.createTextVNode(
-                            " Setup TOTP ",
-                            -1
-                            /* CACHED */
-                          )
-                        ])),
-                        _: 1,
-                        __: [13]
-                      }, 8, ["disabled"])
-                    ]),
-                    vue.createCommentVNode(" Email MFA Setup "),
-                    vue.createElementVNode("div", {
-                      class: "group p-3 sm:p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer active:scale-[0.98] touch-manipulation",
-                      onClick: $setup.startEmailMfaSetup
-                    }, [
-                      _cache[16] || (_cache[16] = vue.createElementVNode(
-                        "div",
-                        { class: "flex items-center space-x-3 mb-3" },
-                        [
-                          vue.createElementVNode("div", { class: "flex-shrink-0 w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center group-hover:bg-green-100 transition-colors duration-200" }, [
-                            vue.createElementVNode("span", { class: "text-xl" }, "📧")
-                          ]),
-                          vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                            vue.createElementVNode("h4", { class: "font-medium text-gray-900 text-sm" }, "Email Verification"),
-                            vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "Codes sent to your email")
-                          ])
-                        ],
-                        -1
-                        /* CACHED */
-                      )),
-                      vue.createVNode($setup["StrandsUiButton"], {
-                        variant: "primary",
-                        size: "sm",
-                        onClick: vue.withModifiers($setup.startEmailMfaSetup, ["stop"]),
-                        disabled: $setup.mfaLoading,
-                        class: "w-full"
-                      }, {
-                        default: vue.withCtx(() => _cache[15] || (_cache[15] = [
-                          vue.createTextVNode(
-                            " Setup Email 2FA ",
-                            -1
-                            /* CACHED */
-                          )
-                        ])),
-                        _: 1,
-                        __: [15]
-                      }, 8, ["disabled"])
-                    ]),
-                    vue.createCommentVNode(" Hardware Key & Passkeys Setup "),
-                    vue.createElementVNode("div", {
-                      class: "group p-3 sm:p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-md transition-all duration-200 cursor-pointer active:scale-[0.98] touch-manipulation sm:col-span-2 lg:col-span-1",
-                      onClick: $setup.startHardwareKeySetup
-                    }, [
-                      _cache[18] || (_cache[18] = vue.createElementVNode(
-                        "div",
-                        { class: "flex items-center space-x-3 mb-3" },
-                        [
-                          vue.createElementVNode("div", { class: "flex-shrink-0 w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center group-hover:bg-purple-100 transition-colors duration-200" }, [
-                            vue.createElementVNode("span", { class: "text-xl" }, "🔑")
-                          ]),
-                          vue.createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                            vue.createElementVNode("h4", { class: "font-medium text-gray-900 text-sm" }, "Hardware Key & Passkeys"),
-                            vue.createElementVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "YubiKey, FIDO2, WebAuthn, Passkeys")
-                          ])
-                        ],
-                        -1
-                        /* CACHED */
-                      )),
-                      vue.createVNode($setup["StrandsUiButton"], {
-                        variant: "primary",
-                        size: "sm",
-                        onClick: vue.withModifiers($setup.startHardwareKeySetup, ["stop"]),
-                        disabled: $setup.mfaLoading,
-                        class: "w-full"
-                      }, {
-                        default: vue.withCtx(() => _cache[17] || (_cache[17] = [
-                          vue.createTextVNode(
-                            " Setup Hardware Key ",
-                            -1
-                            /* CACHED */
-                          )
-                        ])),
-                        _: 1,
-                        __: [17]
-                      }, 8, ["disabled"])
+                ])) : $setup.activeTab === "manage" && $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock(
+                  vue.Fragment,
+                  { key: 1 },
+                  [
+                    vue.createCommentVNode(" Tab Content: Active Devices "),
+                    vue.createElementVNode("div", _hoisted_22$1, [
+                      vue.createElementVNode("div", null, [
+                        _cache[22] || (_cache[22] = vue.createElementVNode(
+                          "h3",
+                          { class: "text-xl font-semibold text-gray-900 mb-6" },
+                          "Manage Your Active Devices",
+                          -1
+                          /* CACHED */
+                        )),
+                        vue.createElementVNode("div", _hoisted_23$1, [
+                          (vue.openBlock(true), vue.createElementBlock(
+                            vue.Fragment,
+                            null,
+                            vue.renderList($setup.activeMfaDevices, (device) => {
+                              return vue.openBlock(), vue.createElementBlock("div", {
+                                key: device.id,
+                                class: "group p-6 bg-white border border-gray-200 rounded-xl hover:border-gray-300 hover:shadow-md transition-all duration-200"
+                              }, [
+                                vue.createElementVNode("div", _hoisted_24$1, [
+                                  vue.createElementVNode("div", _hoisted_25$1, [
+                                    vue.createElementVNode(
+                                      "div",
+                                      {
+                                        class: vue.normalizeClass(["flex-shrink-0 w-14 h-14 rounded-xl flex items-center justify-center", $setup.getDeviceIconBackground(device.device_type)])
+                                      },
+                                      [
+                                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.getDeviceIconComponent(device.device_type)), {
+                                          size: 24,
+                                          class: "text-gray-600"
+                                        }))
+                                      ],
+                                      2
+                                      /* CLASS */
+                                    ),
+                                    vue.createElementVNode("div", _hoisted_26$1, [
+                                      vue.createElementVNode(
+                                        "h4",
+                                        _hoisted_27$1,
+                                        vue.toDisplayString(device.device_name),
+                                        1
+                                        /* TEXT */
+                                      ),
+                                      vue.createElementVNode(
+                                        "p",
+                                        _hoisted_28$1,
+                                        vue.toDisplayString($setup.getDeviceTypeName(device.device_type)),
+                                        1
+                                        /* TEXT */
+                                      ),
+                                      vue.createElementVNode(
+                                        "p",
+                                        _hoisted_29$1,
+                                        " Last used " + vue.toDisplayString($setup.formatLastUsed(device.last_used_at)),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  vue.createElementVNode("div", _hoisted_30$1, [
+                                    vue.createCommentVNode(" Backup codes button for TOTP and Hardware Key devices "),
+                                    device.device_type === "totp" || device.device_type === "hardware" ? (vue.openBlock(), vue.createBlock($setup["StrandsUiButton"], {
+                                      key: 0,
+                                      variant: "secondary",
+                                      size: "sm",
+                                      onClick: ($event) => $setup.showBackupCodes(device),
+                                      disabled: $setup.mfaLoading
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createVNode($setup["KeyRound"], {
+                                          size: 14,
+                                          class: "mr-2"
+                                        }),
+                                        _cache[19] || (_cache[19] = vue.createTextVNode(
+                                          " Backup Codes ",
+                                          -1
+                                          /* CACHED */
+                                        ))
+                                      ]),
+                                      _: 2,
+                                      __: [19]
+                                    }, 1032, ["onClick", "disabled"])) : vue.createCommentVNode("v-if", true),
+                                    vue.createCommentVNode(" Test email MFA "),
+                                    device.device_type === "email" ? (vue.openBlock(), vue.createBlock($setup["StrandsUiButton"], {
+                                      key: 1,
+                                      variant: "secondary",
+                                      size: "sm",
+                                      onClick: ($event) => $setup.testEmailMfa(device),
+                                      disabled: $setup.mfaLoading
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createVNode($setup["Mail"], {
+                                          size: 14,
+                                          class: "mr-2"
+                                        }),
+                                        _cache[20] || (_cache[20] = vue.createTextVNode(
+                                          " Send Test Code ",
+                                          -1
+                                          /* CACHED */
+                                        ))
+                                      ]),
+                                      _: 2,
+                                      __: [20]
+                                    }, 1032, ["onClick", "disabled"])) : vue.createCommentVNode("v-if", true),
+                                    vue.createCommentVNode(" Remove device "),
+                                    vue.createVNode($setup["StrandsUiButton"], {
+                                      variant: "secondary",
+                                      size: "sm",
+                                      onClick: ($event) => $setup.confirmDisableDevice(device),
+                                      disabled: $setup.mfaLoading,
+                                      class: "text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200"
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createVNode($setup["Trash2"], {
+                                          size: 14,
+                                          class: "mr-2"
+                                        }),
+                                        _cache[21] || (_cache[21] = vue.createTextVNode(
+                                          " Remove ",
+                                          -1
+                                          /* CACHED */
+                                        ))
+                                      ]),
+                                      _: 2,
+                                      __: [21]
+                                    }, 1032, ["onClick", "disabled"])
+                                  ])
+                                ])
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ])
+                      ])
                     ])
-                  ])
-                ])
+                  ],
+                  2112
+                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                )) : vue.createCommentVNode("v-if", true)
               ])
             ],
             2112
@@ -8839,26 +9142,26 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
           $setup.showTotpSetup ? (vue.openBlock(), vue.createBlock($setup["StrandsTotpSetupModal"], {
             key: 2,
             show: $setup.showTotpSetup,
-            onClose: _cache[0] || (_cache[0] = ($event) => $setup.showTotpSetup = false),
+            onClose: _cache[2] || (_cache[2] = ($event) => $setup.showTotpSetup = false),
             onSuccess: $setup.handleTotpSetupSuccess
           }, null, 8, ["show"])) : vue.createCommentVNode("v-if", true),
           $setup.showEmailMfaSetup ? (vue.openBlock(), vue.createBlock($setup["StrandsEmailMfaSetupModal"], {
             key: 3,
             show: $setup.showEmailMfaSetup,
-            onClose: _cache[1] || (_cache[1] = ($event) => $setup.showEmailMfaSetup = false),
+            onClose: _cache[3] || (_cache[3] = ($event) => $setup.showEmailMfaSetup = false),
             onSuccess: $setup.handleEmailMfaSetupSuccess
           }, null, 8, ["show"])) : vue.createCommentVNode("v-if", true),
           $setup.showHardwareKeySetup ? (vue.openBlock(), vue.createBlock($setup["StrandsHardwareKeySetupModal"], {
             key: 4,
             show: $setup.showHardwareKeySetup,
-            onClose: _cache[2] || (_cache[2] = ($event) => $setup.showHardwareKeySetup = false),
+            onClose: _cache[4] || (_cache[4] = ($event) => $setup.showHardwareKeySetup = false),
             onSuccess: $setup.handleHardwareKeySetupSuccess
           }, null, 8, ["show"])) : vue.createCommentVNode("v-if", true),
           $setup.showBackupCodesModal ? (vue.openBlock(), vue.createBlock($setup["StrandsBackupCodesModal"], {
             key: 5,
             show: $setup.showBackupCodesModal,
             device: $setup.selectedDevice,
-            onClose: _cache[3] || (_cache[3] = ($event) => $setup.showBackupCodesModal = false)
+            onClose: _cache[5] || (_cache[5] = ($event) => $setup.showBackupCodesModal = false)
           }, null, 8, ["show", "device"])) : vue.createCommentVNode("v-if", true)
         ]),
         _: 1
@@ -8874,7 +9177,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
         "cancel-text": "Keep Device",
         variant: "secondary",
         onConfirm: $setup.handleDisableDevice,
-        onCancel: _cache[4] || (_cache[4] = ($event) => $setup.showConfirmDisable = false)
+        onCancel: _cache[6] || (_cache[6] = ($event) => $setup.showConfirmDisable = false)
       }, null, 8, ["show", "message"])) : vue.createCommentVNode("v-if", true)
     ],
     64
@@ -8896,6 +9199,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const { getSupportEmail, config: strandsConfig, getUrl } = useStrandsConfig.useStrandsConfig(props.config);
     const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth.useStrandsAuth();
+    const { mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = vue.ref(null);
     const fetchingProfile = vue.ref(false);
     const currentUser = vue.computed(() => {
@@ -8973,6 +9277,54 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       const years = Math.floor(diffDays / 365);
       return years === 1 ? "1 year ago" : `${years} years ago`;
     });
+    const deviceTypeCounts = vue.computed(() => {
+      const devices = activeMfaDevices.value || [];
+      const counts = {
+        totp: 0,
+        email: 0,
+        hardware: 0,
+        passkey: 0
+      };
+      devices.forEach((device) => {
+        if (device.device_type in counts) {
+          counts[device.device_type]++;
+        }
+      });
+      return counts;
+    });
+    const mfaDeviceChips = vue.computed(() => {
+      const chips = [];
+      const counts = deviceTypeCounts.value;
+      if (counts.totp > 0) {
+        chips.push({
+          type: "totp",
+          count: counts.totp,
+          label: counts.totp === 1 ? "Auth app" : "Auth apps",
+          icon: Smartphone,
+          color: "bg-blue-50 text-blue-700 border-blue-200"
+        });
+      }
+      if (counts.email > 0) {
+        chips.push({
+          type: "email",
+          count: counts.email,
+          label: "Email",
+          icon: Mail,
+          color: "bg-green-50 text-green-700 border-green-200"
+        });
+      }
+      if (counts.hardware > 0 || counts.passkey > 0) {
+        const totalHardware = counts.hardware + counts.passkey;
+        chips.push({
+          type: "hardware",
+          count: totalHardware,
+          label: totalHardware === 1 ? "Key" : "Keys",
+          icon: KeyRound,
+          color: "bg-purple-50 text-purple-700 border-purple-200"
+        });
+      }
+      return chips;
+    });
     const getInitials2 = (firstName, lastName) => {
       if (!firstName && !lastName) return "U";
       return `${firstName?.[0] || ""}${lastName?.[0] || ""}`.toUpperCase();
@@ -8982,6 +9334,9 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       fetchingProfile.value = true;
       try {
         await fetchProfile();
+        if (isAuthenticated.value) {
+          await fetchMfaDevices();
+        }
       } catch (err) {
         const errorMsg = err instanceof Error ? err.message : "Failed to load profile";
         errorMessage.value = errorMsg;
@@ -9196,6 +9551,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const handleMfaUpdated = async () => {
       try {
         await fetchProfile();
+        await fetchMfaDevices();
         successMessage.value = "MFA settings updated successfully";
         emit("mfa-toggle", currentUser.value?.mfaEnabled || false);
       } catch (err) {
@@ -9233,7 +9589,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         signingOut.value = false;
       }
     };
-    const __returned__ = { props, emit, getSupportEmail, strandsConfig, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, successMessage, errorMessage, activeSessions, fileInputRef, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerFileUpload, handleFileSelect, uploadAvatar, handleMfaUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
+    const __returned__ = { props, emit, getSupportEmail, strandsConfig, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, successMessage, errorMessage, activeSessions, fileInputRef, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, deviceTypeCounts, mfaDeviceChips, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerFileUpload, handleFileSelect, uploadAvatar, handleMfaUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
       return StrandsUiButton;
     }, get StrandsUiInput() {
       return StrandsUiInput;
@@ -9279,38 +9635,44 @@ const _hoisted_16$1 = {
 };
 const _hoisted_17$1 = { class: "space-y-3 md:space-y-4" };
 const _hoisted_18$1 = { class: "space-y-4 p-4 bg-gray-50 rounded-xl" };
-const _hoisted_19 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_19$1 = { class: "flex items-center justify-between gap-2" };
 const _hoisted_20 = { class: "text-sm text-gray-600" };
 const _hoisted_21 = {
   key: 0,
   class: "space-y-3 overflow-hidden"
 };
 const _hoisted_22 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_23 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_24 = { class: "text-sm text-gray-600" };
-const _hoisted_25 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_26 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_27 = { class: "text-sm text-gray-600" };
-const _hoisted_28 = {
+const _hoisted_23 = { class: "flex items-start justify-between gap-4" };
+const _hoisted_24 = { class: "flex-1" };
+const _hoisted_25 = { class: "text-sm text-gray-600 mt-1" };
+const _hoisted_26 = {
+  key: 0,
+  class: "flex flex-wrap gap-2 mt-3"
+};
+const _hoisted_27 = { class: "ml-1" };
+const _hoisted_28 = { class: "p-4 bg-gray-50 rounded-xl" };
+const _hoisted_29 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_30 = { class: "text-sm text-gray-600" };
+const _hoisted_31 = {
   key: 0,
   class: "flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200 animate-slide-up"
 };
-const _hoisted_29 = {
+const _hoisted_32 = {
   key: 0,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_30 = { class: "alert-success" };
-const _hoisted_31 = { class: "flex items-start gap-3" };
-const _hoisted_32 = { class: "font-medium" };
-const _hoisted_33 = {
+const _hoisted_33 = { class: "alert-success" };
+const _hoisted_34 = { class: "flex items-start gap-3" };
+const _hoisted_35 = { class: "font-medium" };
+const _hoisted_36 = {
   key: 1,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_34 = { class: "alert-error" };
-const _hoisted_35 = { class: "flex items-start gap-3" };
-const _hoisted_36 = { class: "font-medium" };
-const _hoisted_37 = { key: 0 };
-const _hoisted_38 = { class: "text-gray-400 text-sm" };
+const _hoisted_37 = { class: "alert-error" };
+const _hoisted_38 = { class: "flex items-start gap-3" };
+const _hoisted_39 = { class: "font-medium" };
+const _hoisted_40 = { key: 0 };
+const _hoisted_41 = { class: "text-gray-400 text-sm" };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
     vue.createElementVNode("div", _hoisted_2$4, [
@@ -9525,7 +9887,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               )),
               vue.createCommentVNode(" Password Change "),
               vue.createElementVNode("div", _hoisted_18$1, [
-                vue.createElementVNode("div", _hoisted_19, [
+                vue.createElementVNode("div", _hoisted_19$1, [
                   vue.createElementVNode("div", null, [
                     _cache[15] || (_cache[15] = vue.createElementVNode(
                       "h4",
@@ -9607,7 +9969,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               vue.createCommentVNode(" Two-Factor Authentication "),
               vue.createElementVNode("div", _hoisted_22, [
                 vue.createElementVNode("div", _hoisted_23, [
-                  vue.createElementVNode("div", null, [
+                  vue.createElementVNode("div", _hoisted_24, [
                     _cache[17] || (_cache[17] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
@@ -9617,16 +9979,60 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_24,
+                      _hoisted_25,
                       vue.toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
-                    )
+                    ),
+                    vue.createCommentVNode(" Device Type Chips "),
+                    $setup.mfaDeviceChips.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList($setup.mfaDeviceChips, (chip) => {
+                          return vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: chip.type,
+                              class: vue.normalizeClass([
+                                "inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium border transition-colors",
+                                chip.color
+                              ])
+                            },
+                            [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(chip.icon), {
+                                size: 12,
+                                class: "mr-1.5"
+                              })),
+                              vue.createElementVNode(
+                                "span",
+                                null,
+                                vue.toDisplayString(chip.count),
+                                1
+                                /* TEXT */
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                _hoisted_27,
+                                vue.toDisplayString(chip.label),
+                                1
+                                /* TEXT */
+                              )
+                            ],
+                            2
+                            /* CLASS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ])) : vue.createCommentVNode("v-if", true)
                   ]),
                   vue.createVNode($setup["StrandsUiButton"], {
                     variant: $setup.currentUser?.mfaEnabled ? "secondary" : "primary",
                     size: "sm",
-                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true)
+                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true),
+                    class: "flex-shrink-0"
                   }, {
                     default: vue.withCtx(() => [
                       vue.createTextVNode(
@@ -9641,8 +10047,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               vue.createCommentVNode(" Active Sessions "),
-              vue.createElementVNode("div", _hoisted_25, [
-                vue.createElementVNode("div", _hoisted_26, [
+              vue.createElementVNode("div", _hoisted_28, [
+                vue.createElementVNode("div", _hoisted_29, [
                   vue.createElementVNode("div", null, [
                     _cache[18] || (_cache[18] = vue.createElementVNode(
                       "h4",
@@ -9653,7 +10059,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_27,
+                      _hoisted_30,
                       vue.toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -9680,7 +10086,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           vue.createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
             vue.createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -9718,9 +10124,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       vue.createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_29, [
-        vue.createElementVNode("div", _hoisted_30, [
-          vue.createElementVNode("div", _hoisted_31, [
+      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
+        vue.createElementVNode("div", _hoisted_33, [
+          vue.createElementVNode("div", _hoisted_34, [
             _cache[22] || (_cache[22] = vue.createElementVNode(
               "svg",
               {
@@ -9740,7 +10146,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_32,
+              _hoisted_35,
               vue.toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -9748,9 +10154,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : vue.createCommentVNode("v-if", true),
-      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, [
-        vue.createElementVNode("div", _hoisted_34, [
-          vue.createElementVNode("div", _hoisted_35, [
+      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
+        vue.createElementVNode("div", _hoisted_37, [
+          vue.createElementVNode("div", _hoisted_38, [
             _cache[23] || (_cache[23] = vue.createElementVNode(
               "svg",
               {
@@ -9770,7 +10176,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_36,
+              _hoisted_39,
               vue.toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -9801,8 +10207,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             /* STABLE */
           }, 8, ["disabled"]),
           vue.createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
-            vue.createElementVNode("p", _hoisted_38, [
+          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
+            vue.createElementVNode("p", _hoisted_41, [
               _cache[25] || (_cache[25] = vue.createTextVNode(
                 " Need help? ",
                 -1
@@ -10041,129 +10447,6 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const StrandsPasswordReset = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__file", "/home/runner/work/strands-accounts/strands-accounts/apps/accounts-ui/src/vue/components/StrandsPasswordReset.vue"]]);
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-const toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-const isEmptyString = (value) => value === "";
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": 2,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-};
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Icon = ({
-  name,
-  iconNode,
-  absoluteStrokeWidth,
-  "absolute-stroke-width": absoluteStrokeWidthKebabCase,
-  strokeWidth,
-  "stroke-width": strokeWidthKebabCase,
-  size = defaultAttributes.width,
-  color = defaultAttributes.stroke,
-  ...props
-}, { slots }) => {
-  return vue.h(
-    "svg",
-    {
-      ...defaultAttributes,
-      ...props,
-      width: size,
-      height: size,
-      stroke: color,
-      "stroke-width": isEmptyString(absoluteStrokeWidth) || isEmptyString(absoluteStrokeWidthKebabCase) || absoluteStrokeWidth === true || absoluteStrokeWidthKebabCase === true ? Number(strokeWidth || strokeWidthKebabCase || defaultAttributes["stroke-width"]) * 24 / Number(size) : strokeWidth || strokeWidthKebabCase || defaultAttributes["stroke-width"],
-      class: mergeClasses(
-        "lucide",
-        props.class,
-        ...name ? [`lucide-${toKebabCase(toPascalCase(name))}-icon`, `lucide-${toKebabCase(name)}`] : ["lucide-icon"]
-      )
-    },
-    [...iconNode.map((child) => vue.h(...child)), ...slots.default ? [slots.default()] : []]
-  );
-};
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const createLucideIcon = (iconName, iconNode) => (props, { slots, attrs }) => vue.h(
-  Icon,
-  {
-    ...attrs,
-    ...props,
-    iconNode,
-    name: iconName
-  },
-  slots
-);
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const KeyRound = createLucideIcon("key-round", [
-  [
-    "path",
-    {
-      d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z",
-      key: "1s6t7t"
-    }
-  ],
-  ["circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor", key: "w0ekpg" }]
-]);
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Mail = createLucideIcon("mail", [
-  ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
-  ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
-]);
-/**
- * @license lucide-vue-next v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Smartphone = createLucideIcon("smartphone", [
-  ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
-  ["path", { d: "M12 18h.01", key: "mhygvu" }]
-]);
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "StrandsMFASetup",
   props: {
@@ -10230,6 +10513,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       return Mail;
     }, get KeyRound() {
       return KeyRound;
+    }, get Shield() {
+      return Shield;
+    }, get Settings() {
+      return Settings;
     } };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -10237,28 +10524,32 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$3 = { class: "flex items-center justify-between" };
 const _hoisted_2$2 = { class: "text-right" };
-const _hoisted_3$2 = { class: "space-y-6" };
+const _hoisted_3$2 = { class: "space-y-8" };
 const _hoisted_4$1 = {
   key: 0,
-  class: "flex items-center justify-center py-12"
+  class: "flex items-center justify-center py-16"
 };
-const _hoisted_5$1 = { class: "space-y-6" };
+const _hoisted_5$1 = { class: "space-y-8" };
 const _hoisted_6 = {
   key: 0,
-  class: "bg-green-50 border border-green-200 rounded-lg p-4"
+  class: "bg-green-50 border border-green-200 rounded-xl p-6"
 };
-const _hoisted_7 = { class: "grid grid-cols-1 md:grid-cols-3 gap-4" };
-const _hoisted_8 = { class: "p-6 border border-gray-200 rounded-lg hover:shadow-sm hover:border-[var(--strands-primary)] transition-all duration-200" };
-const _hoisted_9 = { class: "flex flex-col items-center text-center space-y-3" };
-const _hoisted_10 = { class: "w-12 h-12 bg-[var(--strands-primary)] bg-opacity-10 rounded-lg flex items-center justify-center" };
-const _hoisted_11 = { class: "p-6 border border-gray-200 rounded-lg hover:shadow-sm hover:border-[var(--strands-primary)] transition-all duration-200" };
-const _hoisted_12 = { class: "flex flex-col items-center text-center space-y-3" };
-const _hoisted_13 = { class: "w-12 h-12 bg-[var(--strands-primary)] bg-opacity-10 rounded-lg flex items-center justify-center" };
-const _hoisted_14 = { class: "p-6 border border-gray-200 rounded-lg hover:shadow-sm hover:border-[var(--strands-primary)] transition-all duration-200" };
-const _hoisted_15 = { class: "flex flex-col items-center text-center space-y-3" };
-const _hoisted_16 = { class: "w-12 h-12 bg-[var(--strands-primary)] bg-opacity-10 rounded-lg flex items-center justify-center" };
-const _hoisted_17 = { key: 1 };
-const _hoisted_18 = { class: "flex justify-end space-x-3" };
+const _hoisted_7 = { class: "flex items-center space-x-3" };
+const _hoisted_8 = { class: "w-10 h-10 bg-green-100 rounded-full flex items-center justify-center" };
+const _hoisted_9 = { class: "grid grid-cols-1 md:grid-cols-3 gap-6" };
+const _hoisted_10 = { class: "flex flex-col items-center text-center space-y-4" };
+const _hoisted_11 = { class: "w-16 h-16 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
+const _hoisted_12 = { class: "flex flex-col items-center text-center space-y-4" };
+const _hoisted_13 = { class: "w-16 h-16 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
+const _hoisted_14 = { class: "flex flex-col items-center text-center space-y-4" };
+const _hoisted_15 = { class: "w-16 h-16 bg-[var(--strands-primary)] bg-opacity-10 rounded-xl flex items-center justify-center group-hover:bg-[var(--strands-primary)] group-hover:bg-opacity-15 transition-colors" };
+const _hoisted_16 = {
+  key: 1,
+  class: "border-t border-gray-200 pt-8"
+};
+const _hoisted_17 = { class: "flex items-center justify-between" };
+const _hoisted_18 = { class: "text-gray-600 text-sm mt-1" };
+const _hoisted_19 = { class: "flex justify-end space-x-3" };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock(
     vue.Fragment,
@@ -10267,7 +10558,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createVNode($setup["UiModal"], {
         open: $props.show,
         onClose: $setup.closeModal,
-        "card-class": "max-w-4xl"
+        "card-class": "max-w-5xl"
       }, {
         header: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1$3, [
@@ -10295,7 +10586,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ]),
         footer: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_18, [
+          vue.createElementVNode("div", _hoisted_19, [
             vue.createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
               onClick: $setup.closeModal,
@@ -10332,67 +10623,68 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                 vue.createCommentVNode(" MFA Options "),
                 vue.createElementVNode("div", _hoisted_5$1, [
                   vue.createCommentVNode(" Current MFA Status "),
-                  $setup.mfaEnabled || $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, _cache[6] || (_cache[6] = [
-                    vue.createElementVNode(
-                      "div",
-                      { class: "flex items-center space-x-2" },
-                      [
-                        vue.createElementVNode("svg", {
-                          class: "w-5 h-5 text-green-600",
-                          fill: "currentColor",
-                          viewBox: "0 0 20 20"
-                        }, [
-                          vue.createElementVNode("path", {
-                            "fill-rule": "evenodd",
-                            d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-                            "clip-rule": "evenodd"
-                          })
-                        ]),
-                        vue.createElementVNode("span", { class: "text-green-800 font-medium" }, "2FA is currently enabled on your account")
-                      ],
-                      -1
-                      /* CACHED */
-                    )
-                  ]))) : vue.createCommentVNode("v-if", true),
+                  $setup.mfaEnabled || $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                    vue.createElementVNode("div", _hoisted_7, [
+                      vue.createElementVNode("div", _hoisted_8, [
+                        vue.createVNode($setup["Shield"], {
+                          size: 20,
+                          class: "text-green-600"
+                        })
+                      ]),
+                      _cache[6] || (_cache[6] = vue.createElementVNode(
+                        "div",
+                        null,
+                        [
+                          vue.createElementVNode("span", { class: "text-green-800 font-medium text-lg" }, "2FA is currently enabled on your account"),
+                          vue.createElementVNode("p", { class: "text-green-700 text-sm mt-1" }, "Your account has additional security protection")
+                        ],
+                        -1
+                        /* CACHED */
+                      ))
+                    ])
+                  ])) : vue.createCommentVNode("v-if", true),
                   vue.createCommentVNode(" Setup Options "),
                   vue.createElementVNode("div", null, [
                     _cache[13] || (_cache[13] = vue.createElementVNode(
                       "h3",
-                      { class: "text-lg font-semibold text-gray-900 mb-4" },
-                      "Add New Device",
+                      { class: "text-xl font-semibold text-gray-900 mb-6" },
+                      "Choose Your Authentication Method",
                       -1
                       /* CACHED */
                     )),
-                    vue.createElementVNode("div", _hoisted_7, [
+                    vue.createElementVNode("div", _hoisted_9, [
                       vue.createCommentVNode(" TOTP Setup "),
-                      vue.createElementVNode("div", _hoisted_8, [
-                        vue.createElementVNode("div", _hoisted_9, [
-                          vue.createElementVNode("div", _hoisted_10, [
+                      vue.createElementVNode("div", {
+                        class: "group p-8 border border-gray-200 rounded-xl hover:shadow-lg hover:border-[var(--strands-primary)] transition-all duration-200 cursor-pointer",
+                        onClick: $setup.startTotpSetup
+                      }, [
+                        vue.createElementVNode("div", _hoisted_10, [
+                          vue.createElementVNode("div", _hoisted_11, [
                             vue.createVNode($setup["Smartphone"], {
-                              size: 24,
+                              size: 28,
                               class: "text-[var(--strands-primary)]"
                             })
                           ]),
                           _cache[8] || (_cache[8] = vue.createElementVNode(
                             "div",
-                            null,
+                            { class: "space-y-2" },
                             [
-                              vue.createElementVNode("h4", { class: "font-medium text-gray-900" }, "Authenticator App"),
-                              vue.createElementVNode("p", { class: "text-sm text-gray-500" }, "Google Authenticator, Authy, etc.")
+                              vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Authenticator App"),
+                              vue.createElementVNode("p", { class: "text-sm text-gray-500 leading-relaxed" }, "Use Google Authenticator, Authy, or any TOTP-compatible app to generate secure codes")
                             ],
                             -1
                             /* CACHED */
                           )),
                           vue.createVNode($setup["StrandsUiButton"], {
                             variant: "primary",
-                            size: "sm",
-                            onClick: $setup.startTotpSetup,
+                            size: "md",
+                            onClick: vue.withModifiers($setup.startTotpSetup, ["stop"]),
                             disabled: $setup.loading,
-                            class: "w-full"
+                            class: "w-full mt-4"
                           }, {
                             default: vue.withCtx(() => _cache[7] || (_cache[7] = [
                               vue.createTextVNode(
-                                " Setup TOTP ",
+                                " Setup Authenticator ",
                                 -1
                                 /* CACHED */
                               )
@@ -10403,30 +10695,33 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         ])
                       ]),
                       vue.createCommentVNode(" Email MFA Setup "),
-                      vue.createElementVNode("div", _hoisted_11, [
+                      vue.createElementVNode("div", {
+                        class: "group p-8 border border-gray-200 rounded-xl hover:shadow-lg hover:border-[var(--strands-primary)] transition-all duration-200 cursor-pointer",
+                        onClick: $setup.startEmailMfaSetup
+                      }, [
                         vue.createElementVNode("div", _hoisted_12, [
                           vue.createElementVNode("div", _hoisted_13, [
                             vue.createVNode($setup["Mail"], {
-                              size: 24,
+                              size: 28,
                               class: "text-[var(--strands-primary)]"
                             })
                           ]),
                           _cache[10] || (_cache[10] = vue.createElementVNode(
                             "div",
-                            null,
+                            { class: "space-y-2" },
                             [
-                              vue.createElementVNode("h4", { class: "font-medium text-gray-900" }, "Email Verification"),
-                              vue.createElementVNode("p", { class: "text-sm text-gray-500" }, "Codes sent to your email")
+                              vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Email Verification"),
+                              vue.createElementVNode("p", { class: "text-sm text-gray-500 leading-relaxed" }, "Receive verification codes directly in your email inbox for easy access")
                             ],
                             -1
                             /* CACHED */
                           )),
                           vue.createVNode($setup["StrandsUiButton"], {
                             variant: "primary",
-                            size: "sm",
-                            onClick: $setup.startEmailMfaSetup,
+                            size: "md",
+                            onClick: vue.withModifiers($setup.startEmailMfaSetup, ["stop"]),
                             disabled: $setup.loading,
-                            class: "w-full"
+                            class: "w-full mt-4"
                           }, {
                             default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                               vue.createTextVNode(
@@ -10441,30 +10736,33 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         ])
                       ]),
                       vue.createCommentVNode(" Hardware Key Setup "),
-                      vue.createElementVNode("div", _hoisted_14, [
-                        vue.createElementVNode("div", _hoisted_15, [
-                          vue.createElementVNode("div", _hoisted_16, [
+                      vue.createElementVNode("div", {
+                        class: "group p-8 border border-gray-200 rounded-xl hover:shadow-lg hover:border-[var(--strands-primary)] transition-all duration-200 cursor-pointer",
+                        onClick: $setup.startHardwareKeySetup
+                      }, [
+                        vue.createElementVNode("div", _hoisted_14, [
+                          vue.createElementVNode("div", _hoisted_15, [
                             vue.createVNode($setup["KeyRound"], {
-                              size: 24,
+                              size: 28,
                               class: "text-[var(--strands-primary)]"
                             })
                           ]),
                           _cache[12] || (_cache[12] = vue.createElementVNode(
                             "div",
-                            null,
+                            { class: "space-y-2" },
                             [
-                              vue.createElementVNode("h4", { class: "font-medium text-gray-900" }, "Hardware Key & Passkeys"),
-                              vue.createElementVNode("p", { class: "text-sm text-gray-500" }, "YubiKey, FIDO2, WebAuthn, Passkeys")
+                              vue.createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Hardware Key & Passkeys"),
+                              vue.createElementVNode("p", { class: "text-sm text-gray-500 leading-relaxed" }, "Use YubiKey, FIDO2 devices, WebAuthn, or built-in passkeys for maximum security")
                             ],
                             -1
                             /* CACHED */
                           )),
                           vue.createVNode($setup["StrandsUiButton"], {
                             variant: "primary",
-                            size: "sm",
-                            onClick: $setup.startHardwareKeySetup,
+                            size: "md",
+                            onClick: vue.withModifiers($setup.startHardwareKeySetup, ["stop"]),
                             disabled: $setup.loading,
-                            class: "w-full"
+                            class: "w-full mt-4"
                           }, {
                             default: vue.withCtx(() => _cache[11] || (_cache[11] = [
                               vue.createTextVNode(
@@ -10481,30 +10779,45 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                     ])
                   ]),
                   vue.createCommentVNode(" Manage Existing "),
-                  $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, [
-                    _cache[15] || (_cache[15] = vue.createElementVNode(
-                      "h3",
-                      { class: "text-lg font-semibold text-gray-900 mb-4" },
-                      "Manage Existing Methods",
-                      -1
-                      /* CACHED */
-                    )),
-                    vue.createVNode($setup["StrandsUiButton"], {
-                      variant: "secondary",
-                      onClick: $setup.openMfaModal,
-                      disabled: $setup.loading,
-                      class: "w-full"
-                    }, {
-                      default: vue.withCtx(() => _cache[14] || (_cache[14] = [
-                        vue.createTextVNode(
-                          " Manage 2FA Devices ",
+                  $setup.activeMfaDevices.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
+                    vue.createElementVNode("div", _hoisted_17, [
+                      vue.createElementVNode("div", null, [
+                        _cache[14] || (_cache[14] = vue.createElementVNode(
+                          "h3",
+                          { class: "text-lg font-semibold text-gray-900" },
+                          "Manage Existing Methods",
                           -1
                           /* CACHED */
+                        )),
+                        vue.createElementVNode(
+                          "p",
+                          _hoisted_18,
+                          vue.toDisplayString($setup.activeMfaDevices.length) + " device(s) currently active",
+                          1
+                          /* TEXT */
                         )
-                      ])),
-                      _: 1,
-                      __: [14]
-                    }, 8, ["disabled"])
+                      ]),
+                      vue.createVNode($setup["StrandsUiButton"], {
+                        variant: "secondary",
+                        size: "md",
+                        onClick: $setup.openMfaModal,
+                        disabled: $setup.loading
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode($setup["Settings"], {
+                            size: 16,
+                            class: "mr-2"
+                          }),
+                          _cache[15] || (_cache[15] = vue.createTextVNode(
+                            " Manage Devices ",
+                            -1
+                            /* CACHED */
+                          ))
+                        ]),
+                        _: 1,
+                        __: [15]
+                      }, 8, ["disabled"])
+                    ])
                   ])) : vue.createCommentVNode("v-if", true)
                 ])
               ],