@strands.gg/accui 1.1.4 → 1.2.0

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

@@ -1475,37 +1475,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 openBlock(), createBlock($setup["UiModal"], {
     open: $props.show,
@@ -1524,7 +1524,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       )
     ])),
     footer: withCtx(() => [
-      createElementVNode("div", _hoisted_27$1, [
+      createElementVNode("div", _hoisted_27$2, [
         createVNode($setup["StrandsUiButton"], {
           variant: "secondary",
           onClick: $setup.closeModal,
@@ -1683,7 +1683,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : createCommentVNode("v-if", true),
               createCommentVNode(" Email MFA Code Request "),
-              $setup.selectedMethod?.device_type === "email" && !$setup.emailCodeSent ? (openBlock(), createElementBlock("div", _hoisted_18$5, [
+              $setup.selectedMethod?.device_type === "email" && !$setup.emailCodeSent ? (openBlock(), createElementBlock("div", _hoisted_18$6, [
                 _cache[8] || (_cache[8] = createElementVNode(
                   "p",
                   { class: "text-sm text-gray-600 mb-4" },
@@ -1709,7 +1709,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 8, ["disabled", "loading"])
               ])) : createCommentVNode("v-if", true),
               createCommentVNode(" Hardware Key Authentication "),
-              $setup.selectedMethod?.device_type === "hardware" ? (openBlock(), createElementBlock("div", _hoisted_19$3, [
+              $setup.selectedMethod?.device_type === "hardware" ? (openBlock(), createElementBlock("div", _hoisted_19$5, [
                 _cache[10] || (_cache[10] = createElementVNode(
                   "div",
                   { class: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
@@ -1757,9 +1757,9 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 8, ["disabled", "loading"])
               ])) : createCommentVNode("v-if", true),
               createCommentVNode(" Code Input "),
-              $setup.selectedMethod && $setup.selectedMethod.device_type !== "hardware" && ($setup.selectedMethod.device_type !== "email" || $setup.emailCodeSent) ? (openBlock(), createElementBlock("div", _hoisted_20$2, [
+              $setup.selectedMethod && $setup.selectedMethod.device_type !== "hardware" && ($setup.selectedMethod.device_type !== "email" || $setup.emailCodeSent) ? (openBlock(), createElementBlock("div", _hoisted_20$3, [
                 createCommentVNode(" Email confirmation "),
-                $setup.selectedMethod.device_type === "email" && $setup.emailCodeSent ? (openBlock(), createElementBlock("div", _hoisted_21$2, _cache[11] || (_cache[11] = [
+                $setup.selectedMethod.device_type === "email" && $setup.emailCodeSent ? (openBlock(), createElementBlock("div", _hoisted_21$3, _cache[11] || (_cache[11] = [
                   createElementVNode(
                     "div",
                     { class: "flex items-start space-x-2" },
@@ -1800,28 +1800,28 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 createCommentVNode(" TOTP Help "),
                 $setup.selectedMethod.device_type === "totp" ? (openBlock(), createElementBlock(
                   "div",
-                  _hoisted_22$2,
+                  _hoisted_22$3,
                   ' Open your authenticator app and enter the 6-digit code for "' + toDisplayString($setup.selectedMethod.device_name) + '" ',
                   1
                   /* TEXT */
                 )) : createCommentVNode("v-if", true),
                 createCommentVNode(" Email Resend "),
-                $setup.selectedMethod.device_type === "email" ? (openBlock(), createElementBlock("div", _hoisted_23$1, [
+                $setup.selectedMethod.device_type === "email" ? (openBlock(), createElementBlock("div", _hoisted_23$2, [
                   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"
-                  }, toDisplayString($setup.cooldownActive ? `Resend in ${$setup.cooldownSeconds}s` : "Resend Code"), 9, _hoisted_24$1)
+                  }, toDisplayString($setup.cooldownActive ? `Resend in ${$setup.cooldownSeconds}s` : "Resend Code"), 9, _hoisted_24$2)
                 ])) : createCommentVNode("v-if", true),
                 createCommentVNode(" Backup Codes Option "),
-                createElementVNode("div", _hoisted_25$1, [
+                createElementVNode("div", _hoisted_25$2, [
                   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 ")
                 ]),
                 createCommentVNode(" Backup Code Input "),
-                $setup.showBackupCodeInput ? (openBlock(), createElementBlock("div", _hoisted_26$1, [
+                $setup.showBackupCodeInput ? (openBlock(), createElementBlock("div", _hoisted_26$2, [
                   createVNode($setup["StrandsUiInput"], {
                     modelValue: $setup.backupCode,
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.backupCode = $event),
@@ -3244,11 +3244,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 openBlock(), createElementBlock("div", _hoisted_1$d, [
     createCommentVNode(" Success State "),
@@ -3501,7 +3501,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
                   )),
                   createElementVNode(
                     "p",
-                    _hoisted_18$4,
+                    _hoisted_18$5,
                     toDisplayString($setup.error),
                     1
                     /* TEXT */
@@ -3510,8 +3510,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ])) : createCommentVNode("v-if", true),
             createCommentVNode(" Sign in link "),
-            createElementVNode("div", _hoisted_19$2, [
-              createElementVNode("p", _hoisted_20$1, [
+            createElementVNode("div", _hoisted_19$4, [
+              createElementVNode("p", _hoisted_20$2, [
                 _cache[10] || (_cache[10] = createTextVNode(
                   " Already have an account? ",
                   -1
@@ -3530,8 +3530,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 createCommentVNode(" Need help "),
-                $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_21$1, [
-                  createElementVNode("p", _hoisted_22$1, [
+                $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_21$2, [
+                  createElementVNode("p", _hoisted_22$2, [
                     _cache[12] || (_cache[12] = createTextVNode(
                       " Need help? ",
                       -1
@@ -4121,6 +4121,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 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) => 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 }) => 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;
 }
@@ -6391,8 +6558,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 openBlock(), createBlock($setup["UiModal"], {
     open: $props.show,
@@ -6715,7 +6882,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
               ))
             ])
           ]),
-          createElementVNode("div", _hoisted_18$3, [
+          createElementVNode("div", _hoisted_18$4, [
             createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
               size: "sm",
@@ -6733,7 +6900,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
             })
           ])
         ]),
-        createElementVNode("div", _hoisted_19$1, [
+        createElementVNode("div", _hoisted_19$3, [
           createVNode($setup["StrandsUiButton"], {
             variant: "primary",
             onClick: $setup.finish
@@ -7425,7 +7592,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 openBlock(), createBlock($setup["UiModal"], {
     open: $props.show,
@@ -7823,7 +7990,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
             /* TEXT */
           )
         ]),
-        createElementVNode("div", _hoisted_18$2, [
+        createElementVNode("div", _hoisted_18$3, [
           createVNode($setup["StrandsUiButton"], {
             variant: "secondary",
             onClick: _cache[2] || (_cache[2] = ($event) => $setup.step = 1)
@@ -8385,6 +8552,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       formatLastUsed
     } = useStrandsMfa();
     const showModal = computed(() => props.show);
+    const activeTab = ref("add");
     const showTotpSetup = ref(false);
     const showEmailMfaSetup = ref(false);
     const showHardwareKeySetup = ref(false);
@@ -8444,16 +8612,19 @@ const _sfc_main$8 = /* @__PURE__ */ 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) => {
@@ -8469,10 +8640,33 @@ const _sfc_main$8 = /* @__PURE__ */ 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__;
@@ -8495,15 +8689,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 openBlock(), createElementBlock(
     Fragment,
@@ -8512,11 +8725,11 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode($setup["UiModal"], {
         open: $setup.showModal,
         onClose: $setup.closeModal,
-        "card-class": "max-w-lg"
+        "card-class": "max-w-4xl"
       }, {
         header: withCtx(() => [
           createElementVNode("div", { class: "flex items-center justify-between" }, [
-            _cache[6] || (_cache[6] = createElementVNode(
+            _cache[8] || (_cache[8] = createElementVNode(
               "h2",
               { class: "text-2xl font-bold text-gray-900" },
               "Two-Factor Authentication",
@@ -8526,7 +8739,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
             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] = [
               createElementVNode(
                 "svg",
                 {
@@ -8552,7 +8765,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [
           $setup.mfaLoading ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
             createVNode($setup["StrandsUiLoader"], { size: 32 }),
-            _cache[7] || (_cache[7] = createElementVNode(
+            _cache[9] || (_cache[9] = createElementVNode(
               "span",
               { class: "ml-3 text-gray-600" },
               "Loading MFA settings...",
@@ -8563,13 +8776,13 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
             Fragment,
             { key: 1 },
             [
-              createCommentVNode(" Content when loaded "),
+              createCommentVNode(" Tab Navigation "),
               createElementVNode("div", _hoisted_2$5, [
                 createCommentVNode(" MFA Status Overview "),
                 createElementVNode("div", _hoisted_3$5, [
                   createElementVNode("div", _hoisted_4$4, [
                     createElementVNode("div", null, [
-                      _cache[8] || (_cache[8] = createElementVNode(
+                      _cache[10] || (_cache[10] = createElementVNode(
                         "h3",
                         { class: "font-semibold text-gray-900" },
                         "Two-Factor Authentication",
@@ -8585,251 +8798,341 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
                       )
                     ]),
                     createElementVNode("div", _hoisted_6$2, [
-                      $setup.mfaEnabled ? (openBlock(), createElementBlock("span", _hoisted_7$2, " ✓ Enabled ")) : (openBlock(), createElementBlock("span", _hoisted_8$2, " Not Enabled "))
+                      $setup.mfaEnabled ? (openBlock(), createElementBlock("span", _hoisted_7$2, [
+                        createVNode($setup["Shield"], {
+                          size: 12,
+                          class: "mr-1"
+                        }),
+                        _cache[11] || (_cache[11] = createTextVNode(
+                          " Enabled ",
+                          -1
+                          /* CACHED */
+                        ))
+                      ])) : (openBlock(), createElementBlock("span", _hoisted_8$2, " Not Enabled "))
                     ])
                   ])
                 ]),
-                createCommentVNode(" Active Devices "),
-                $setup.activeMfaDevices.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_9$2, [
-                  _cache[12] || (_cache[12] = createElementVNode(
-                    "h3",
-                    { class: "text-lg font-semibold text-gray-900 mb-4" },
-                    "Active Devices",
-                    -1
-                    /* CACHED */
-                  )),
-                  createElementVNode("div", _hoisted_10$2, [
-                    (openBlock(true), createElementBlock(
-                      Fragment,
-                      null,
-                      renderList($setup.activeMfaDevices, (device) => {
-                        return openBlock(), 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"
-                        }, [
-                          createElementVNode("div", _hoisted_11$2, [
-                            createElementVNode(
-                              "div",
-                              {
-                                class: normalizeClass(["flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center", $setup.getDeviceIconBackground(device.device_type)])
-                              },
-                              [
-                                createElementVNode(
-                                  "span",
-                                  _hoisted_12$2,
-                                  toDisplayString($setup.getDeviceTypeIcon(device.device_type)),
-                                  1
-                                  /* TEXT */
-                                )
-                              ],
-                              2
-                              /* CLASS */
-                            ),
-                            createElementVNode("div", _hoisted_13$2, [
-                              createElementVNode(
-                                "h4",
-                                _hoisted_14$2,
-                                toDisplayString(device.device_name),
-                                1
-                                /* TEXT */
-                              ),
-                              createElementVNode(
-                                "p",
-                                _hoisted_15$2,
-                                toDisplayString($setup.getDeviceTypeName(device.device_type)) + " • Last used " + toDisplayString($setup.formatLastUsed(device.last_used_at)),
-                                1
-                                /* TEXT */
-                              )
-                            ])
+                createCommentVNode(" Tab Navigation "),
+                createElementVNode("div", _hoisted_9$2, [
+                  createElementVNode("nav", _hoisted_10$2, [
+                    createElementVNode(
+                      "button",
+                      {
+                        onClick: _cache[0] || (_cache[0] = ($event) => $setup.activeTab = "add"),
+                        class: 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 ? (openBlock(), createElementBlock(
+                      "button",
+                      {
+                        key: 0,
+                        onClick: _cache[1] || (_cache[1] = ($event) => $setup.activeTab = "manage"),
+                        class: 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 (" + toDisplayString($setup.activeMfaDevices.length) + ") ",
+                      3
+                      /* TEXT, CLASS */
+                    )) : createCommentVNode("v-if", true)
+                  ])
+                ]),
+                createCommentVNode(" Tab Content: Add New Device "),
+                $setup.activeTab === "add" ? (openBlock(), createElementBlock("div", _hoisted_11$2, [
+                  createElementVNode("div", null, [
+                    _cache[18] || (_cache[18] = createElementVNode(
+                      "h3",
+                      { class: "text-xl font-semibold text-gray-900 mb-6" },
+                      "Choose Your Authentication Method",
+                      -1
+                      /* CACHED */
+                    )),
+                    createElementVNode("div", _hoisted_12$2, [
+                      createCommentVNode(" TOTP Setup "),
+                      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
+                      }, [
+                        createElementVNode("div", _hoisted_13$2, [
+                          createElementVNode("div", _hoisted_14$2, [
+                            createVNode($setup["Smartphone"], {
+                              size: 24,
+                              class: "text-[var(--strands-primary)]"
+                            })
                           ]),
-                          createElementVNode("div", _hoisted_16$2, [
-                            createCommentVNode(" Backup codes button for TOTP and Hardware Key devices "),
-                            device.device_type === "totp" || device.device_type === "hardware" ? (openBlock(), createBlock($setup["StrandsUiButton"], {
-                              key: 0,
-                              variant: "secondary",
-                              size: "sm",
-                              onClick: ($event) => $setup.showBackupCodes(device),
+                          _cache[13] || (_cache[13] = createElementVNode(
+                            "div",
+                            { class: "flex items-start space-x-4" },
+                            [
+                              createElementVNode("div", { class: "min-w-0 flex-1" }, [
+                                createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Authenticator App"),
+                                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 */
+                          )),
+                          createElementVNode("div", _hoisted_15$2, [
+                            createVNode($setup["StrandsUiButton"], {
+                              variant: "primary",
+                              size: "md",
+                              onClick: withModifiers($setup.startTotpSetup, ["stop"]),
                               disabled: $setup.mfaLoading
                             }, {
-                              default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                              default: withCtx(() => _cache[12] || (_cache[12] = [
                                 createTextVNode(
-                                  " Backup Codes ",
+                                  " Setup ",
                                   -1
                                   /* CACHED */
                                 )
-                              ])]),
-                              _: 2,
-                              __: [9]
-                            }, 1032, ["onClick", "disabled"])) : createCommentVNode("v-if", true),
-                            createCommentVNode(" Test email MFA "),
-                            device.device_type === "email" ? (openBlock(), createBlock($setup["StrandsUiButton"], {
-                              key: 1,
-                              variant: "secondary",
-                              size: "sm",
-                              onClick: ($event) => $setup.testEmailMfa(device),
+                              ])),
+                              _: 1,
+                              __: [12]
+                            }, 8, ["disabled"])
+                          ])
+                        ])
+                      ]),
+                      createCommentVNode(" Email MFA Setup "),
+                      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
+                      }, [
+                        createElementVNode("div", _hoisted_16$2, [
+                          createElementVNode("div", _hoisted_17$2, [
+                            createVNode($setup["Mail"], {
+                              size: 24,
+                              class: "text-[var(--strands-primary)]"
+                            })
+                          ]),
+                          _cache[15] || (_cache[15] = createElementVNode(
+                            "div",
+                            { class: "flex items-start space-x-4" },
+                            [
+                              createElementVNode("div", { class: "min-w-0 flex-1" }, [
+                                createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Email Verification"),
+                                createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Receive verification codes directly in your email inbox for easy access ")
+                              ])
+                            ],
+                            -1
+                            /* CACHED */
+                          )),
+                          createElementVNode("div", _hoisted_18$2, [
+                            createVNode($setup["StrandsUiButton"], {
+                              variant: "primary",
+                              size: "md",
+                              onClick: withModifiers($setup.startEmailMfaSetup, ["stop"]),
                               disabled: $setup.mfaLoading
                             }, {
-                              default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                              default: withCtx(() => _cache[14] || (_cache[14] = [
                                 createTextVNode(
-                                  " Send Test Code ",
+                                  " Setup ",
                                   -1
                                   /* CACHED */
                                 )
-                              ])]),
-                              _: 2,
-                              __: [10]
-                            }, 1032, ["onClick", "disabled"])) : createCommentVNode("v-if", true),
-                            createCommentVNode(" Remove device "),
+                              ])),
+                              _: 1,
+                              __: [14]
+                            }, 8, ["disabled"])
+                          ])
+                        ])
+                      ]),
+                      createCommentVNode(" Hardware Key & Passkeys Setup "),
+                      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
+                      }, [
+                        createElementVNode("div", _hoisted_19$2, [
+                          createElementVNode("div", _hoisted_20$1, [
+                            createVNode($setup["KeyRound"], {
+                              size: 24,
+                              class: "text-[var(--strands-primary)]"
+                            })
+                          ]),
+                          _cache[17] || (_cache[17] = createElementVNode(
+                            "div",
+                            { class: "flex items-start space-x-4" },
+                            [
+                              createElementVNode("div", { class: "min-w-0 flex-1" }, [
+                                createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Hardware Key & Passkeys"),
+                                createElementVNode("p", { class: "text-xs text-gray-500 mt-2" }, " Use YubiKey, FIDO2 devices, WebAuthn, or built-in passkeys for maximum security ")
+                              ])
+                            ],
+                            -1
+                            /* CACHED */
+                          )),
+                          createElementVNode("div", _hoisted_21$1, [
                             createVNode($setup["StrandsUiButton"], {
-                              variant: "secondary",
-                              size: "sm",
-                              onClick: ($event) => $setup.confirmDisableDevice(device),
+                              variant: "primary",
+                              size: "md",
+                              onClick: withModifiers($setup.startHardwareKeySetup, ["stop"]),
                               disabled: $setup.mfaLoading
                             }, {
-                              default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                              default: withCtx(() => _cache[16] || (_cache[16] = [
                                 createTextVNode(
-                                  " Remove ",
+                                  " Setup ",
                                   -1
                                   /* CACHED */
                                 )
-                              ])]),
-                              _: 2,
-                              __: [11]
-                            }, 1032, ["onClick", "disabled"])
+                              ])),
+                              _: 1,
+                              __: [16]
+                            }, 8, ["disabled"])
                           ])
-                        ]);
-                      }),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
+                        ])
+                      ])
+                    ])
                   ])
-                ])) : createCommentVNode("v-if", true),
-                createCommentVNode(" Add New Device "),
-                createElementVNode("div", null, [
-                  _cache[19] || (_cache[19] = createElementVNode(
-                    "h3",
-                    { class: "text-lg font-semibold text-gray-900 mb-4" },
-                    "Add New Device",
-                    -1
-                    /* CACHED */
-                  )),
-                  createElementVNode("div", _hoisted_17$2, [
-                    createCommentVNode(" TOTP Setup "),
-                    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] = createElementVNode(
-                        "div",
-                        { class: "flex items-center space-x-3 mb-3" },
-                        [
-                          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" }, [
-                            createElementVNode("span", { class: "text-xl" }, "📱")
-                          ]),
-                          createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                            createElementVNode("h4", { class: "font-medium text-gray-900 text-sm" }, "Authenticator App"),
-                            createElementVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "Google Authenticator, Authy, etc.")
-                          ])
-                        ],
-                        -1
-                        /* CACHED */
-                      )),
-                      createVNode($setup["StrandsUiButton"], {
-                        variant: "primary",
-                        size: "sm",
-                        onClick: withModifiers($setup.startTotpSetup, ["stop"]),
-                        disabled: $setup.mfaLoading,
-                        class: "w-full"
-                      }, {
-                        default: withCtx(() => _cache[13] || (_cache[13] = [
-                          createTextVNode(
-                            " Setup TOTP ",
-                            -1
-                            /* CACHED */
-                          )
-                        ])),
-                        _: 1,
-                        __: [13]
-                      }, 8, ["disabled"])
-                    ]),
-                    createCommentVNode(" Email MFA Setup "),
-                    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] = createElementVNode(
-                        "div",
-                        { class: "flex items-center space-x-3 mb-3" },
-                        [
-                          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" }, [
-                            createElementVNode("span", { class: "text-xl" }, "📧")
-                          ]),
-                          createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                            createElementVNode("h4", { class: "font-medium text-gray-900 text-sm" }, "Email Verification"),
-                            createElementVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "Codes sent to your email")
-                          ])
-                        ],
-                        -1
-                        /* CACHED */
-                      )),
-                      createVNode($setup["StrandsUiButton"], {
-                        variant: "primary",
-                        size: "sm",
-                        onClick: withModifiers($setup.startEmailMfaSetup, ["stop"]),
-                        disabled: $setup.mfaLoading,
-                        class: "w-full"
-                      }, {
-                        default: withCtx(() => _cache[15] || (_cache[15] = [
-                          createTextVNode(
-                            " Setup Email 2FA ",
-                            -1
-                            /* CACHED */
-                          )
-                        ])),
-                        _: 1,
-                        __: [15]
-                      }, 8, ["disabled"])
-                    ]),
-                    createCommentVNode(" Hardware Key & Passkeys Setup "),
-                    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] = createElementVNode(
-                        "div",
-                        { class: "flex items-center space-x-3 mb-3" },
-                        [
-                          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" }, [
-                            createElementVNode("span", { class: "text-xl" }, "🔑")
-                          ]),
-                          createElementVNode("div", { class: "min-w-0 flex-1" }, [
-                            createElementVNode("h4", { class: "font-medium text-gray-900 text-sm" }, "Hardware Key & Passkeys"),
-                            createElementVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "YubiKey, FIDO2, WebAuthn, Passkeys")
-                          ])
-                        ],
-                        -1
-                        /* CACHED */
-                      )),
-                      createVNode($setup["StrandsUiButton"], {
-                        variant: "primary",
-                        size: "sm",
-                        onClick: withModifiers($setup.startHardwareKeySetup, ["stop"]),
-                        disabled: $setup.mfaLoading,
-                        class: "w-full"
-                      }, {
-                        default: withCtx(() => _cache[17] || (_cache[17] = [
-                          createTextVNode(
-                            " Setup Hardware Key ",
-                            -1
-                            /* CACHED */
-                          )
-                        ])),
-                        _: 1,
-                        __: [17]
-                      }, 8, ["disabled"])
+                ])) : $setup.activeTab === "manage" && $setup.activeMfaDevices.length > 0 ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 1 },
+                  [
+                    createCommentVNode(" Tab Content: Active Devices "),
+                    createElementVNode("div", _hoisted_22$1, [
+                      createElementVNode("div", null, [
+                        _cache[22] || (_cache[22] = createElementVNode(
+                          "h3",
+                          { class: "text-xl font-semibold text-gray-900 mb-6" },
+                          "Manage Your Active Devices",
+                          -1
+                          /* CACHED */
+                        )),
+                        createElementVNode("div", _hoisted_23$1, [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList($setup.activeMfaDevices, (device) => {
+                              return openBlock(), 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"
+                              }, [
+                                createElementVNode("div", _hoisted_24$1, [
+                                  createElementVNode("div", _hoisted_25$1, [
+                                    createElementVNode(
+                                      "div",
+                                      {
+                                        class: normalizeClass(["flex-shrink-0 w-14 h-14 rounded-xl flex items-center justify-center", $setup.getDeviceIconBackground(device.device_type)])
+                                      },
+                                      [
+                                        (openBlock(), createBlock(resolveDynamicComponent($setup.getDeviceIconComponent(device.device_type)), {
+                                          size: 24,
+                                          class: "text-gray-600"
+                                        }))
+                                      ],
+                                      2
+                                      /* CLASS */
+                                    ),
+                                    createElementVNode("div", _hoisted_26$1, [
+                                      createElementVNode(
+                                        "h4",
+                                        _hoisted_27$1,
+                                        toDisplayString(device.device_name),
+                                        1
+                                        /* TEXT */
+                                      ),
+                                      createElementVNode(
+                                        "p",
+                                        _hoisted_28$1,
+                                        toDisplayString($setup.getDeviceTypeName(device.device_type)),
+                                        1
+                                        /* TEXT */
+                                      ),
+                                      createElementVNode(
+                                        "p",
+                                        _hoisted_29$1,
+                                        " Last used " + toDisplayString($setup.formatLastUsed(device.last_used_at)),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  createElementVNode("div", _hoisted_30$1, [
+                                    createCommentVNode(" Backup codes button for TOTP and Hardware Key devices "),
+                                    device.device_type === "totp" || device.device_type === "hardware" ? (openBlock(), createBlock($setup["StrandsUiButton"], {
+                                      key: 0,
+                                      variant: "secondary",
+                                      size: "sm",
+                                      onClick: ($event) => $setup.showBackupCodes(device),
+                                      disabled: $setup.mfaLoading
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode($setup["KeyRound"], {
+                                          size: 14,
+                                          class: "mr-2"
+                                        }),
+                                        _cache[19] || (_cache[19] = createTextVNode(
+                                          " Backup Codes ",
+                                          -1
+                                          /* CACHED */
+                                        ))
+                                      ]),
+                                      _: 2,
+                                      __: [19]
+                                    }, 1032, ["onClick", "disabled"])) : createCommentVNode("v-if", true),
+                                    createCommentVNode(" Test email MFA "),
+                                    device.device_type === "email" ? (openBlock(), createBlock($setup["StrandsUiButton"], {
+                                      key: 1,
+                                      variant: "secondary",
+                                      size: "sm",
+                                      onClick: ($event) => $setup.testEmailMfa(device),
+                                      disabled: $setup.mfaLoading
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode($setup["Mail"], {
+                                          size: 14,
+                                          class: "mr-2"
+                                        }),
+                                        _cache[20] || (_cache[20] = createTextVNode(
+                                          " Send Test Code ",
+                                          -1
+                                          /* CACHED */
+                                        ))
+                                      ]),
+                                      _: 2,
+                                      __: [20]
+                                    }, 1032, ["onClick", "disabled"])) : createCommentVNode("v-if", true),
+                                    createCommentVNode(" Remove device "),
+                                    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: withCtx(() => [
+                                        createVNode($setup["Trash2"], {
+                                          size: 14,
+                                          class: "mr-2"
+                                        }),
+                                        _cache[21] || (_cache[21] = createTextVNode(
+                                          " Remove ",
+                                          -1
+                                          /* CACHED */
+                                        ))
+                                      ]),
+                                      _: 2,
+                                      __: [21]
+                                    }, 1032, ["onClick", "disabled"])
+                                  ])
+                                ])
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ])
+                      ])
                     ])
-                  ])
-                ])
+                  ],
+                  2112
+                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                )) : createCommentVNode("v-if", true)
               ])
             ],
             2112
@@ -8838,26 +9141,26 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
           $setup.showTotpSetup ? (openBlock(), 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"])) : createCommentVNode("v-if", true),
           $setup.showEmailMfaSetup ? (openBlock(), 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"])) : createCommentVNode("v-if", true),
           $setup.showHardwareKeySetup ? (openBlock(), 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"])) : createCommentVNode("v-if", true),
           $setup.showBackupCodesModal ? (openBlock(), 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"])) : createCommentVNode("v-if", true)
         ]),
         _: 1
@@ -8873,7 +9176,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"])) : createCommentVNode("v-if", true)
     ],
     64
@@ -9278,7 +9581,7 @@ 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,
@@ -9524,7 +9827,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               )),
               createCommentVNode(" Password Change "),
               createElementVNode("div", _hoisted_18$1, [
-                createElementVNode("div", _hoisted_19, [
+                createElementVNode("div", _hoisted_19$1, [
                   createElementVNode("div", null, [
                     _cache[15] || (_cache[15] = createElementVNode(
                       "h4",
@@ -10040,129 +10343,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 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) => 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 }) => 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__ */ defineComponent({
   __name: "StrandsMFASetup",
   props: {
@@ -10229,6 +10409,10 @@ const _sfc_main$5 = /* @__PURE__ */ 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__;
@@ -10236,28 +10420,32 @@ const _sfc_main$5 = /* @__PURE__ */ 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: "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_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_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 openBlock(), createElementBlock(
     Fragment,
@@ -10266,7 +10454,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode($setup["UiModal"], {
         open: $props.show,
         onClose: $setup.closeModal,
-        "card-class": "max-w-4xl"
+        "card-class": "max-w-5xl"
       }, {
         header: withCtx(() => [
           createElementVNode("div", _hoisted_1$3, [
@@ -10294,7 +10482,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ]),
         footer: withCtx(() => [
-          createElementVNode("div", _hoisted_18, [
+          createElementVNode("div", _hoisted_19, [
             createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
               onClick: $setup.closeModal,
@@ -10331,67 +10519,68 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                 createCommentVNode(" MFA Options "),
                 createElementVNode("div", _hoisted_5$1, [
                   createCommentVNode(" Current MFA Status "),
-                  $setup.mfaEnabled || $setup.activeMfaDevices.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, _cache[6] || (_cache[6] = [
-                    createElementVNode(
-                      "div",
-                      { class: "flex items-center space-x-2" },
-                      [
-                        createElementVNode("svg", {
-                          class: "w-5 h-5 text-green-600",
-                          fill: "currentColor",
-                          viewBox: "0 0 20 20"
-                        }, [
-                          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"
-                          })
-                        ]),
-                        createElementVNode("span", { class: "text-green-800 font-medium" }, "2FA is currently enabled on your account")
-                      ],
-                      -1
-                      /* CACHED */
-                    )
-                  ]))) : createCommentVNode("v-if", true),
+                  $setup.mfaEnabled || $setup.activeMfaDevices.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    createElementVNode("div", _hoisted_7, [
+                      createElementVNode("div", _hoisted_8, [
+                        createVNode($setup["Shield"], {
+                          size: 20,
+                          class: "text-green-600"
+                        })
+                      ]),
+                      _cache[6] || (_cache[6] = createElementVNode(
+                        "div",
+                        null,
+                        [
+                          createElementVNode("span", { class: "text-green-800 font-medium text-lg" }, "2FA is currently enabled on your account"),
+                          createElementVNode("p", { class: "text-green-700 text-sm mt-1" }, "Your account has additional security protection")
+                        ],
+                        -1
+                        /* CACHED */
+                      ))
+                    ])
+                  ])) : createCommentVNode("v-if", true),
                   createCommentVNode(" Setup Options "),
                   createElementVNode("div", null, [
                     _cache[13] || (_cache[13] = 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 */
                     )),
-                    createElementVNode("div", _hoisted_7, [
+                    createElementVNode("div", _hoisted_9, [
                       createCommentVNode(" TOTP Setup "),
-                      createElementVNode("div", _hoisted_8, [
-                        createElementVNode("div", _hoisted_9, [
-                          createElementVNode("div", _hoisted_10, [
+                      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
+                      }, [
+                        createElementVNode("div", _hoisted_10, [
+                          createElementVNode("div", _hoisted_11, [
                             createVNode($setup["Smartphone"], {
-                              size: 24,
+                              size: 28,
                               class: "text-[var(--strands-primary)]"
                             })
                           ]),
                           _cache[8] || (_cache[8] = createElementVNode(
                             "div",
-                            null,
+                            { class: "space-y-2" },
                             [
-                              createElementVNode("h4", { class: "font-medium text-gray-900" }, "Authenticator App"),
-                              createElementVNode("p", { class: "text-sm text-gray-500" }, "Google Authenticator, Authy, etc.")
+                              createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Authenticator App"),
+                              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 */
                           )),
                           createVNode($setup["StrandsUiButton"], {
                             variant: "primary",
-                            size: "sm",
-                            onClick: $setup.startTotpSetup,
+                            size: "md",
+                            onClick: withModifiers($setup.startTotpSetup, ["stop"]),
                             disabled: $setup.loading,
-                            class: "w-full"
+                            class: "w-full mt-4"
                           }, {
                             default: withCtx(() => _cache[7] || (_cache[7] = [
                               createTextVNode(
-                                " Setup TOTP ",
+                                " Setup Authenticator ",
                                 -1
                                 /* CACHED */
                               )
@@ -10402,30 +10591,33 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         ])
                       ]),
                       createCommentVNode(" Email MFA Setup "),
-                      createElementVNode("div", _hoisted_11, [
+                      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
+                      }, [
                         createElementVNode("div", _hoisted_12, [
                           createElementVNode("div", _hoisted_13, [
                             createVNode($setup["Mail"], {
-                              size: 24,
+                              size: 28,
                               class: "text-[var(--strands-primary)]"
                             })
                           ]),
                           _cache[10] || (_cache[10] = createElementVNode(
                             "div",
-                            null,
+                            { class: "space-y-2" },
                             [
-                              createElementVNode("h4", { class: "font-medium text-gray-900" }, "Email Verification"),
-                              createElementVNode("p", { class: "text-sm text-gray-500" }, "Codes sent to your email")
+                              createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Email Verification"),
+                              createElementVNode("p", { class: "text-sm text-gray-500 leading-relaxed" }, "Receive verification codes directly in your email inbox for easy access")
                             ],
                             -1
                             /* CACHED */
                           )),
                           createVNode($setup["StrandsUiButton"], {
                             variant: "primary",
-                            size: "sm",
-                            onClick: $setup.startEmailMfaSetup,
+                            size: "md",
+                            onClick: withModifiers($setup.startEmailMfaSetup, ["stop"]),
                             disabled: $setup.loading,
-                            class: "w-full"
+                            class: "w-full mt-4"
                           }, {
                             default: withCtx(() => _cache[9] || (_cache[9] = [
                               createTextVNode(
@@ -10440,30 +10632,33 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                         ])
                       ]),
                       createCommentVNode(" Hardware Key Setup "),
-                      createElementVNode("div", _hoisted_14, [
-                        createElementVNode("div", _hoisted_15, [
-                          createElementVNode("div", _hoisted_16, [
+                      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
+                      }, [
+                        createElementVNode("div", _hoisted_14, [
+                          createElementVNode("div", _hoisted_15, [
                             createVNode($setup["KeyRound"], {
-                              size: 24,
+                              size: 28,
                               class: "text-[var(--strands-primary)]"
                             })
                           ]),
                           _cache[12] || (_cache[12] = createElementVNode(
                             "div",
-                            null,
+                            { class: "space-y-2" },
                             [
-                              createElementVNode("h4", { class: "font-medium text-gray-900" }, "Hardware Key & Passkeys"),
-                              createElementVNode("p", { class: "text-sm text-gray-500" }, "YubiKey, FIDO2, WebAuthn, Passkeys")
+                              createElementVNode("h4", { class: "font-semibold text-gray-900 text-lg" }, "Hardware Key & Passkeys"),
+                              createElementVNode("p", { class: "text-sm text-gray-500 leading-relaxed" }, "Use YubiKey, FIDO2 devices, WebAuthn, or built-in passkeys for maximum security")
                             ],
                             -1
                             /* CACHED */
                           )),
                           createVNode($setup["StrandsUiButton"], {
                             variant: "primary",
-                            size: "sm",
-                            onClick: $setup.startHardwareKeySetup,
+                            size: "md",
+                            onClick: withModifiers($setup.startHardwareKeySetup, ["stop"]),
                             disabled: $setup.loading,
-                            class: "w-full"
+                            class: "w-full mt-4"
                           }, {
                             default: withCtx(() => _cache[11] || (_cache[11] = [
                               createTextVNode(
@@ -10480,30 +10675,45 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                     ])
                   ]),
                   createCommentVNode(" Manage Existing "),
-                  $setup.activeMfaDevices.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_17, [
-                    _cache[15] || (_cache[15] = createElementVNode(
-                      "h3",
-                      { class: "text-lg font-semibold text-gray-900 mb-4" },
-                      "Manage Existing Methods",
-                      -1
-                      /* CACHED */
-                    )),
-                    createVNode($setup["StrandsUiButton"], {
-                      variant: "secondary",
-                      onClick: $setup.openMfaModal,
-                      disabled: $setup.loading,
-                      class: "w-full"
-                    }, {
-                      default: withCtx(() => _cache[14] || (_cache[14] = [
-                        createTextVNode(
-                          " Manage 2FA Devices ",
+                  $setup.activeMfaDevices.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_16, [
+                    createElementVNode("div", _hoisted_17, [
+                      createElementVNode("div", null, [
+                        _cache[14] || (_cache[14] = createElementVNode(
+                          "h3",
+                          { class: "text-lg font-semibold text-gray-900" },
+                          "Manage Existing Methods",
                           -1
                           /* CACHED */
+                        )),
+                        createElementVNode(
+                          "p",
+                          _hoisted_18,
+                          toDisplayString($setup.activeMfaDevices.length) + " device(s) currently active",
+                          1
+                          /* TEXT */
                         )
-                      ])),
-                      _: 1,
-                      __: [14]
-                    }, 8, ["disabled"])
+                      ]),
+                      createVNode($setup["StrandsUiButton"], {
+                        variant: "secondary",
+                        size: "md",
+                        onClick: $setup.openMfaModal,
+                        disabled: $setup.loading
+                      }, {
+                        default: withCtx(() => [
+                          createVNode($setup["Settings"], {
+                            size: 16,
+                            class: "mr-2"
+                          }),
+                          _cache[15] || (_cache[15] = createTextVNode(
+                            " Manage Devices ",
+                            -1
+                            /* CACHED */
+                          ))
+                        ]),
+                        _: 1,
+                        __: [15]
+                      }, 8, ["disabled"])
+                    ])
                   ])) : createCommentVNode("v-if", true)
                 ])
               ],