@strands.gg/accui 2.2.2 → 2.2.4

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

@@ -866,7 +866,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-2b9f8959"]]);
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-26b9fb0d"]]);
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "UiLink",
   props: {
@@ -1497,9 +1497,9 @@ const _hoisted_14$g = { class: "crop-svg" };
 const _hoisted_15$e = ["cx", "cy", "r"];
 const _hoisted_16$e = { class: "controls" };
 const _hoisted_17$d = { class: "zoom-control" };
-const _hoisted_18$c = ["min", "max"];
-const _hoisted_19$b = { class: "action-buttons" };
-const _hoisted_20$a = { class: "preview-section" };
+const _hoisted_18$d = ["min", "max"];
+const _hoisted_19$c = { class: "action-buttons" };
+const _hoisted_20$b = { class: "preview-section" };
 const _hoisted_21$9 = { class: "preview-container" };
 const _hoisted_22$9 = ["width", "height"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
@@ -1896,7 +1896,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                       constrainImagePosition();
                       updateCanvas();
                     })
-                  }, null, 40, _hoisted_18$c), [
+                  }, null, 40, _hoisted_18$d), [
                     [
                       vModelText,
                       zoom.value,
@@ -1918,7 +1918,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                     "aria-label": "Zoom in"
                   })
                 ]),
-                createElementVNode("div", _hoisted_19$b, [
+                createElementVNode("div", _hoisted_19$c, [
                   createVNode(StrandsUiButton, {
                     onClick: resetImage,
                     variant: "outline",
@@ -1954,7 +1954,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 ])
               ])
             ]),
-            createElementVNode("div", _hoisted_20$a, [
+            createElementVNode("div", _hoisted_20$b, [
               _cache[9] || (_cache[9] = createElementVNode("h3", { class: "preview-title" }, "Preview", -1)),
               createElementVNode("div", _hoisted_21$9, [
                 createElementVNode("canvas", {
@@ -2782,7 +2782,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-4ed5f36e"]]);
+const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-62dd0f6c"]]);
 const tailwindColors = {
   "#000000": {
     label: "Black"
@@ -3405,9 +3405,9 @@ const _hoisted_14$f = { class: "ui-color-picker-contrast-color-demo" };
 const _hoisted_15$d = { class: "ui-color-picker-contrast-ratio" };
 const _hoisted_16$d = { class: "ui-color-picker-contrast-levels" };
 const _hoisted_17$c = { class: "ui-color-picker-contrast-level-value" };
-const _hoisted_18$b = { class: "ui-color-picker-contrast-level-value" };
-const _hoisted_19$a = { class: "ui-color-picker-contrast-graph" };
-const _hoisted_20$9 = {
+const _hoisted_18$c = { class: "ui-color-picker-contrast-level-value" };
+const _hoisted_19$b = { class: "ui-color-picker-contrast-graph" };
+const _hoisted_20$a = {
   viewBox: "0 0 280 40",
   class: "ui-color-picker-contrast-svg"
 };
@@ -5022,11 +5022,11 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", { class: "ui-color-picker-contrast-level-line ui-color-picker-contrast-level-line--dashed" }),
                   createElementVNode("span", { class: "ui-color-picker-contrast-level-label" }, "Large Text")
                 ], -1)),
-                createElementVNode("span", _hoisted_18$b, toDisplayString(contrastData.value.largeText), 1)
+                createElementVNode("span", _hoisted_18$c, toDisplayString(contrastData.value.largeText), 1)
               ], 2)
             ]),
-            createElementVNode("div", _hoisted_19$a, [
-              (openBlock(), createElementBlock("svg", _hoisted_20$9, [
+            createElementVNode("div", _hoisted_19$b, [
+              (openBlock(), createElementBlock("svg", _hoisted_20$a, [
                 _cache[13] || (_cache[13] = createStaticVNode('<defs data-v-e9e45931><linearGradient id="contrastGradientDefault" x1="0%" y1="0%" x2="100%" y2="0%" data-v-e9e45931><stop offset="0%" stop-color="#ef4444" data-v-e9e45931></stop><stop offset="21.4%" stop-color="#ef4444" data-v-e9e45931></stop><stop offset="21.4%" stop-color="#f59e0b" data-v-e9e45931></stop><stop offset="64.3%" stop-color="#f59e0b" data-v-e9e45931></stop><stop offset="64.3%" stop-color="#22c55e" data-v-e9e45931></stop><stop offset="100%" stop-color="#22c55e" data-v-e9e45931></stop></linearGradient></defs><rect x="0" y="15" width="280" height="10" fill="url(#contrastGradientDefault)" rx="5" data-v-e9e45931></rect><line x1="60" y1="10" x2="60" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-e9e45931></line><line x1="180" y1="10" x2="180" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-e9e45931></line>', 4)),
                 createElementVNode("circle", {
                   cx: Math.min(270, Math.max(10, Math.min(contrastData.value.ratio, 14) / 14 * 260 + 10)),
@@ -5688,9 +5688,9 @@ const _hoisted_14$e = { value: "" };
 const _hoisted_15$c = ["value"];
 const _hoisted_16$c = { class: "ui-table-body" };
 const _hoisted_17$b = { class: "ui-table-group-content" };
-const _hoisted_18$a = { class: "ui-table-group-name" };
-const _hoisted_19$9 = { class: "ui-table-group-count" };
-const _hoisted_20$8 = ["onClick"];
+const _hoisted_18$b = { class: "ui-table-group-name" };
+const _hoisted_19$a = { class: "ui-table-group-count" };
+const _hoisted_20$9 = ["onClick"];
 const _hoisted_21$7 = ["onClick"];
 const _hoisted_22$7 = { class: "ui-table-subrow-content" };
 const _hoisted_23$6 = { class: "ui-table-subrow-default" };
@@ -6083,8 +6083,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                 }, [
                   createElementVNode("div", _hoisted_17$b, [
                     createVNode(unref(Users), { size: 16 }),
-                    createElementVNode("span", _hoisted_18$a, toDisplayString(row._groupName), 1),
-                    createElementVNode("span", _hoisted_19$9, "(" + toDisplayString(row._groupCount) + " items)", 1)
+                    createElementVNode("span", _hoisted_18$b, toDisplayString(row._groupName), 1),
+                    createElementVNode("span", _hoisted_19$a, "(" + toDisplayString(row._groupCount) + " items)", 1)
                   ])
                 ], 4)) : (openBlock(), createElementBlock("div", {
                   key: 1,
@@ -6132,7 +6132,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                       ], true)
                     ], 14, _hoisted_21$7);
                   }), 128))
-                ], 10, _hoisted_20$8)),
+                ], 10, _hoisted_20$9)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
@@ -6653,7 +6653,7 @@ function useStrandsMfa() {
   const makeAuthenticatedRequest = async (url, options = {}) => {
     const headers = {
       "Content-Type": "application/json",
-      ...options.headers
+      ...options.headers || {}
     };
     if (currentSession.value?.accessToken) {
       headers["Authorization"] = `Bearer ${currentSession.value.accessToken}`;
@@ -6881,12 +6881,12 @@ const _hoisted_17$a = {
   key: 2,
   class: "mfa-email-request"
 };
-const _hoisted_18$9 = {
+const _hoisted_18$a = {
   key: 3,
   class: "mfa-hardware-section"
 };
-const _hoisted_19$8 = { class: "mfa-hardware-prompt" };
-const _hoisted_20$7 = { class: "mfa-hardware-prompt-content" };
+const _hoisted_19$9 = { class: "mfa-hardware-prompt" };
+const _hoisted_20$8 = { class: "mfa-hardware-prompt-content" };
 const _hoisted_21$6 = { class: "mfa-hardware-prompt-icon" };
 const _hoisted_22$6 = { class: "mfa-hardware-prompt-text" };
 const _hoisted_23$5 = { class: "mfa-hardware-prompt-title" };
@@ -7379,9 +7379,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                     _: 1
                   }, 8, ["disabled", "loading"])
                 ])) : createCommentVNode("", true),
-                selectedMethod.value?.device_type === "hardware" || selectedMethod.value?.device_type === "passkey" ? (openBlock(), createElementBlock("div", _hoisted_18$9, [
-                  createElementVNode("div", _hoisted_19$8, [
-                    createElementVNode("div", _hoisted_20$7, [
+                selectedMethod.value?.device_type === "hardware" || selectedMethod.value?.device_type === "passkey" ? (openBlock(), createElementBlock("div", _hoisted_18$a, [
+                  createElementVNode("div", _hoisted_19$9, [
+                    createElementVNode("div", _hoisted_20$8, [
                       createElementVNode("div", _hoisted_21$6, [
                         (openBlock(), createBlock(resolveDynamicComponent(selectedMethod.value.device_type === "passkey" ? IconShield : IconKeyRound), {
                           size: 24,
@@ -7830,7 +7830,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$m = { class: "accui-component-scope" };
-const _hoisted_2$i = { class: "auth-logo-header" };
+const _hoisted_2$i = {
+  key: 0,
+  class: "auth-logo-header"
+};
 const _hoisted_3$i = { class: "auth-header" };
 const _hoisted_4$h = {
   key: 0,
@@ -7869,12 +7872,12 @@ const _hoisted_15$a = {
 };
 const _hoisted_16$a = { class: "auth-oauth-generic-text" };
 const _hoisted_17$9 = { class: "auth-oauth-text" };
-const _hoisted_18$8 = {
+const _hoisted_18$9 = {
   key: 0,
   class: "auth-divider"
 };
-const _hoisted_19$7 = { class: "auth-divider-text" };
-const _hoisted_20$6 = {
+const _hoisted_19$8 = { class: "auth-divider-text" };
+const _hoisted_20$7 = {
   key: 0,
   class: "auth-password-field"
 };
@@ -8144,9 +8147,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createElementVNode("div", null, [
-              createElementVNode("div", _hoisted_2$i, [
+              !props.inModal ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
                 createVNode(_sfc_main$p)
-              ]),
+              ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_3$i, [
                 createVNode(Transition, {
                   name: "fade",
@@ -8272,8 +8275,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_18$8, [
-                    createElementVNode("span", _hoisted_19$7, "Or " + toDisplayString(isSignUp.value ? "create account" : "sign in") + " with email", 1)
+                  !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_18$9, [
+                    createElementVNode("span", _hoisted_19$8, "Or " + toDisplayString(isSignUp.value ? "create account" : "sign in") + " with email", 1)
                   ])) : createCommentVNode("", true)
                 ]),
                 _: 1
@@ -8306,7 +8309,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                     onAfterLeave
                   }, {
                     default: withCtx(() => [
-                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_20$6, [
+                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_20$7, [
                         createElementVNode("div", _hoisted_21$5, [
                           _cache[10] || (_cache[10] = createElementVNode("span", { class: "auth-password-label" }, "Password", -1)),
                           createVNode(unref(StrandsUiLink), {
@@ -8399,7 +8402,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 _: 1
               }),
               error.value ? (openBlock(), createBlock(unref(StrandsUiAlert), {
-                key: 0,
+                key: 1,
                 variant: "error",
                 message: error.value,
                 class: "auth-error-alert",
@@ -8448,7 +8451,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsAuth = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e683c269"]]);
+const StrandsAuth = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-ee5a004f"]]);
 const _hoisted_1$l = {
   viewBox: "0 0 24 24",
   class: "accui-w-5 accui-h-5"
@@ -8521,8 +8524,8 @@ const _hoisted_14$b = { class: "accui-form-group" };
 const _hoisted_15$9 = { class: "accui-input-wrapper" };
 const _hoisted_16$9 = { class: "accui-form-group" };
 const _hoisted_17$8 = { class: "accui-input-wrapper" };
-const _hoisted_18$7 = { class: "accui-auth-links" };
-const _hoisted_19$6 = { class: "accui-auth-link-text" };
+const _hoisted_18$8 = { class: "accui-auth-links" };
+const _hoisted_19$7 = { class: "accui-auth-link-text" };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "StrandsSignIn",
   props: {
@@ -8740,8 +8743,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 dismissible: "",
                 onDismiss: _cache[4] || (_cache[4] = ($event) => error.value = "")
               }, null, 8, ["message"])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_18$7, [
-                createElementVNode("p", _hoisted_19$6, [
+              createElementVNode("div", _hoisted_18$8, [
+                createElementVNode("p", _hoisted_19$7, [
                   _cache[14] || (_cache[14] = createTextVNode(" Don't have an account? ", -1)),
                   createVNode(unref(StrandsUiLink), {
                     onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("switch-to-signup")),
@@ -8815,16 +8818,16 @@ const _hoisted_17$7 = {
   viewBox: "0 0 24 24",
   class: "oauth-icon"
 };
-const _hoisted_18$6 = {
+const _hoisted_18$7 = {
   key: 2,
   class: "oauth-icon oauth-icon-github",
   viewBox: "0 0 24 24"
 };
-const _hoisted_19$5 = {
+const _hoisted_19$6 = {
   key: 3,
   class: "oauth-icon-fallback"
 };
-const _hoisted_20$5 = { class: "oauth-icon-fallback-text" };
+const _hoisted_20$6 = { class: "oauth-icon-fallback-text" };
 const _hoisted_21$4 = { class: "oauth-button-text" };
 const _hoisted_22$4 = {
   key: 1,
@@ -9041,10 +9044,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                             fill: "#EA4335",
                             d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                           }, null, -1)
-                        ])])) : provider.id === "github" ? (openBlock(), createElementBlock("svg", _hoisted_18$6, [..._cache[7] || (_cache[7] = [
+                        ])])) : provider.id === "github" ? (openBlock(), createElementBlock("svg", _hoisted_18$7, [..._cache[7] || (_cache[7] = [
                           createElementVNode("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }, null, -1)
-                        ])])) : (openBlock(), createElementBlock("div", _hoisted_19$5, [
-                          createElementVNode("span", _hoisted_20$5, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
+                        ])])) : (openBlock(), createElementBlock("div", _hoisted_19$6, [
+                          createElementVNode("span", _hoisted_20$6, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
                         ]))
                       ]),
                       createElementVNode("span", _hoisted_21$4, "Continue with " + toDisplayString(provider.displayName || provider.name), 1)
@@ -9533,9 +9536,9 @@ const _hoisted_15$7 = {
 };
 const _hoisted_16$7 = { class: "totp-setup-backup-codes" };
 const _hoisted_17$6 = { class: "totp-setup-backup-grid-wrapper" };
-const _hoisted_18$5 = { class: "totp-setup-backup-grid" };
-const _hoisted_19$4 = { class: "totp-setup-backup-actions" };
-const _hoisted_20$4 = { class: "totp-setup-final-actions" };
+const _hoisted_18$6 = { class: "totp-setup-backup-grid" };
+const _hoisted_19$5 = { class: "totp-setup-backup-actions" };
+const _hoisted_20$5 = { class: "totp-setup-final-actions" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "StrandsTotpSetupModal",
   props: {
@@ -9831,7 +9834,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   ])
                 ], -1)),
                 createElementVNode("div", _hoisted_17$6, [
-                  createElementVNode("div", _hoisted_18$5, [
+                  createElementVNode("div", _hoisted_18$6, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(totpSetupData.value?.backup_codes, (code, index) => {
                       return openBlock(), createElementBlock("div", {
                         key: index,
@@ -9840,7 +9843,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                     }), 128))
                   ])
                 ]),
-                createElementVNode("div", _hoisted_19$4, [
+                createElementVNode("div", _hoisted_19$5, [
                   createVNode(unref(StrandsUiButton), {
                     variant: "secondary",
                     size: "sm",
@@ -9853,7 +9856,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              createElementVNode("div", _hoisted_20$4, [
+              createElementVNode("div", _hoisted_20$5, [
                 createVNode(unref(StrandsUiButton), {
                   variant: "primary",
                   onClick: finish
@@ -10603,12 +10606,12 @@ const _hoisted_14$6 = { class: "mfa-device-action" };
 const _hoisted_15$5 = { class: "mfa-device-layout" };
 const _hoisted_16$5 = { class: "mfa-device-icon-container mfa-device-icon-email" };
 const _hoisted_17$5 = { class: "mfa-device-action" };
-const _hoisted_18$4 = {
+const _hoisted_18$5 = {
   key: 1,
   class: "mfa-manage-devices"
 };
-const _hoisted_19$3 = { class: "mfa-devices-list" };
-const _hoisted_20$3 = { class: "mfa-device-card-content" };
+const _hoisted_19$4 = { class: "mfa-devices-list" };
+const _hoisted_20$4 = { class: "mfa-device-card-content" };
 const _hoisted_21$3 = { class: "mfa-device-card-info" };
 const _hoisted_22$3 = { class: "mfa-device-card-details" };
 const _hoisted_23$2 = { class: "mfa-device-card-name" };
@@ -10911,16 +10914,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         ])
                       ])
                     ])
-                  ])) : currentTab?.value === "manage" && unref(activeMfaDevices).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_18$4, [
+                  ])) : currentTab?.value === "manage" && unref(activeMfaDevices).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_18$5, [
                     createElementVNode("div", null, [
                       _cache[14] || (_cache[14] = createElementVNode("h3", { class: "mfa-section-title" }, "Manage Your Active Devices", -1)),
-                      createElementVNode("div", _hoisted_19$3, [
+                      createElementVNode("div", _hoisted_19$4, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(activeMfaDevices), (device) => {
                           return openBlock(), createElementBlock("div", {
                             key: device.id,
                             class: "mfa-device-card"
                           }, [
-                            createElementVNode("div", _hoisted_20$3, [
+                            createElementVNode("div", _hoisted_20$4, [
                               createElementVNode("div", _hoisted_21$3, [
                                 createElementVNode("div", {
                                   class: normalizeClass(["mfa-device-card-icon-container", getDeviceIconBackground(device.device_type)])
@@ -11293,9 +11296,9 @@ const _hoisted_14$4 = { class: "sessions-list" };
 const _hoisted_15$4 = { class: "session-header" };
 const _hoisted_16$4 = { class: "session-device" };
 const _hoisted_17$4 = { class: "device-icon" };
-const _hoisted_18$3 = { class: "device-info" };
-const _hoisted_19$2 = { class: "device-name" };
-const _hoisted_20$2 = {
+const _hoisted_18$4 = { class: "device-info" };
+const _hoisted_19$3 = { class: "device-name" };
+const _hoisted_20$3 = {
   key: 0,
   class: "current-badge"
 };
@@ -11660,10 +11663,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                         createElementVNode("div", _hoisted_17$4, [
                           (openBlock(), createBlock(resolveDynamicComponent(getDeviceIcon(session.device_type)), { size: 20 }))
                         ]),
-                        createElementVNode("div", _hoisted_18$3, [
-                          createElementVNode("h4", _hoisted_19$2, [
+                        createElementVNode("div", _hoisted_18$4, [
+                          createElementVNode("h4", _hoisted_19$3, [
                             createTextVNode(toDisplayString(session.device_name || "Unknown Device") + " ", 1),
-                            session.is_current ? (openBlock(), createElementBlock("span", _hoisted_20$2, "Current")) : createCommentVNode("", true)
+                            session.is_current ? (openBlock(), createElementBlock("span", _hoisted_20$3, "Current")) : createCommentVNode("", true)
                           ]),
                           createElementVNode("p", _hoisted_21$2, toDisplayString(session.device_type || "Unknown type"), 1)
                         ])
@@ -11801,9 +11804,9 @@ const _hoisted_16$3 = {
   class: "profile-change-form"
 };
 const _hoisted_17$3 = { class: "profile-field-section" };
-const _hoisted_18$2 = { class: "profile-field-header" };
-const _hoisted_19$1 = { class: "profile-field-subtitle" };
-const _hoisted_20$1 = {
+const _hoisted_18$3 = { class: "profile-field-header" };
+const _hoisted_19$2 = { class: "profile-field-subtitle" };
+const _hoisted_20$2 = {
   key: 0,
   class: "profile-change-form"
 };
@@ -12663,10 +12666,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       })
                     ]),
                     createElementVNode("div", _hoisted_17$3, [
-                      createElementVNode("div", _hoisted_18$2, [
+                      createElementVNode("div", _hoisted_18$3, [
                         createElementVNode("div", null, [
                           _cache[12] || (_cache[12] = createElementVNode("h4", { class: "profile-field-title" }, "Username", -1)),
-                          createElementVNode("p", _hoisted_19$1, toDisplayString(currentUser.value?.username || "No username set"), 1)
+                          createElementVNode("p", _hoisted_19$2, toDisplayString(currentUser.value?.username || "No username set"), 1)
                         ]),
                         createVNode(unref(StrandsUiButton), {
                           variant: "secondary",
@@ -12682,7 +12685,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       ]),
                       createVNode(Transition, { name: "expand" }, {
                         default: withCtx(() => [
-                          showUsernameChange.value ? (openBlock(), createElementBlock("div", _hoisted_20$1, [
+                          showUsernameChange.value ? (openBlock(), createElementBlock("div", _hoisted_20$2, [
                             createVNode(unref(StrandsUiInput), {
                               modelValue: usernameForm.username,
                               "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => usernameForm.username = $event),
@@ -12797,7 +12800,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                         createVNode(StrandsMfaModal, { onMfaUpdated: handleMfaUpdated }, {
                           trigger: withCtx(() => [
                             createVNode(unref(StrandsUiButton), {
-                              variant: currentUser.value?.mfaEnabled ? "secondary" : "primary",
+                              variant: "secondary",
                               size: "sm",
                               class: "profile-toggle-container"
                             }, {
@@ -12805,7 +12808,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                                 createTextVNode(toDisplayString(currentUser.value?.mfaEnabled ? "Manage" : "Setup"), 1)
                               ]),
                               _: 1
-                            }, 8, ["variant"])
+                            })
                           ]),
                           _: 1
                         })
@@ -13007,7 +13010,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-2c3b6c2d"]]);
+const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a61738d7"]]);
 const _hoisted_1$8 = { class: "accui-component-scope" };
 const _hoisted_2$6 = { class: "accui-w-full accui-min-w-100 accui-max-w-md accui-mx-auto accui-animate-slide-up" };
 const _hoisted_3$6 = { class: "accui-mt-8 accui-text-center" };
@@ -13451,35 +13454,38 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = ["onKeydown", "aria-expanded"];
-const _hoisted_2$3 = { class: "user-button-content" };
-const _hoisted_3$3 = {
+const _hoisted_1$4 = { key: 0 };
+const _hoisted_2$3 = ["onKeydown", "aria-expanded"];
+const _hoisted_3$3 = { class: "user-button-content" };
+const _hoisted_4$3 = {
   key: 0,
   class: "user-info"
 };
-const _hoisted_4$3 = { class: "user-name" };
-const _hoisted_5$2 = { class: "avatar-container" };
-const _hoisted_6$2 = { class: "avatar-wrapper" };
-const _hoisted_7$2 = ["src", "alt"];
-const _hoisted_8$2 = {
+const _hoisted_5$2 = { class: "user-name" };
+const _hoisted_6$2 = { class: "avatar-container" };
+const _hoisted_7$2 = { class: "avatar-wrapper" };
+const _hoisted_8$2 = ["src", "alt"];
+const _hoisted_9$2 = {
   key: 1,
   class: "avatar-default"
 };
-const _hoisted_9$2 = ["onKeydown"];
-const _hoisted_10$2 = { class: "dropdown-content" };
-const _hoisted_11$2 = { class: "dropdown-header" };
-const _hoisted_12$2 = {
+const _hoisted_10$2 = ["onKeydown"];
+const _hoisted_11$2 = { class: "dropdown-content" };
+const _hoisted_12$2 = { class: "dropdown-header" };
+const _hoisted_13$2 = {
   key: 0,
   class: "dropdown-avatar-container"
 };
-const _hoisted_13$2 = ["src", "alt"];
-const _hoisted_14$2 = {
+const _hoisted_14$2 = ["src", "alt"];
+const _hoisted_15$2 = {
   key: 1,
   class: "dropdown-avatar-default"
 };
-const _hoisted_15$2 = { class: "dropdown-user-details" };
-const _hoisted_16$2 = { class: "dropdown-user-name" };
-const _hoisted_17$2 = { class: "dropdown-user-email" };
+const _hoisted_16$2 = { class: "dropdown-user-details" };
+const _hoisted_17$2 = { class: "dropdown-user-name" };
+const _hoisted_18$2 = { class: "dropdown-user-email" };
+const _hoisted_19$1 = { key: 1 };
+const _hoisted_20$1 = { class: "sign-in-auth-wrapper" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "StrandsUserButton",
   props: {
@@ -13494,13 +13500,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { currentUser, signOut } = useStrandsAuth();
+    const { currentUser, signOut, isAuthenticated } = useStrandsAuth();
     const showDropdown = ref(false);
     const showProfileModal = ref(false);
     const showSignInModal = ref(false);
     const containerRef = ref();
     const profileButtonRef = ref();
-    const user = computed(() => props.user || currentUser.value);
+    const user = computed(() => {
+      if (props.user) return props.user;
+      return isAuthenticated.value ? currentUser.value : null;
+    });
     const displayName = computed(() => {
       if (!user.value) return "User";
       if (user.value.username) {
@@ -13550,7 +13559,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const handleProfileUpdated = () => {
       emit("profile-updated");
     };
-    const handleProfileError = (error) => {
+    const handleProfileError = () => {
     };
     const openSignIn = () => {
       showSignInModal.value = true;
@@ -13562,7 +13571,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       closeSignIn();
       emit("signed-in");
     };
-    const handleSignInError = (error) => {
+    const handleSignInError = () => {
     };
     const handleSignOut = async () => {
       try {
@@ -13589,261 +13598,209 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         ref_key: "containerRef",
         ref: containerRef
       }, [
-        createVNode(unref(SignedIn), {
-          invert: !!props.user
-        }, {
-          loading: withCtx(() => [..._cache[0] || (_cache[0] = [])]),
-          fallback: withCtx(() => [
-            createElementVNode("button", {
-              onClick: openSignIn,
-              class: "sign-in-button",
-              "aria-label": "Sign in"
-            }, [..._cache[10] || (_cache[10] = [
-              createElementVNode("svg", {
-                class: "sign-in-icon",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24"
-              }, [
-                createElementVNode("path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "stroke-width": "2",
-                  d: "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
-                })
-              ], -1),
-              createElementVNode("span", null, "Sign In", -1)
-            ])]),
-            createVNode(UiModal, {
-              open: showSignInModal.value,
-              onClose: closeSignIn,
-              "fullscreen-on-mobile": false
-            }, {
-              header: withCtx(() => [
-                createElementVNode("div", { class: "modal-header" }, [
-                  _cache[12] || (_cache[12] = createElementVNode("h2", { class: "modal-title" }, "Sign In", -1)),
-                  createElementVNode("button", {
-                    onClick: closeSignIn,
-                    class: "modal-close-button",
-                    "aria-label": "Close sign in"
-                  }, [..._cache[11] || (_cache[11] = [
+        user.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+          createElementVNode("button", {
+            onClick: toggleDropdown,
+            onKeydown: [
+              withKeys(toggleDropdown, ["enter"]),
+              withKeys(withModifiers(toggleDropdown, ["prevent"]), ["space"]),
+              withKeys(closeDropdown, ["escape"]),
+              withKeys(withModifiers(openDropdown, ["prevent"]), ["arrow-down"])
+            ],
+            class: normalizeClass(["user-button", { "user-button-active": showDropdown.value }]),
+            "aria-haspopup": "true",
+            "aria-expanded": showDropdown.value,
+            "aria-label": "User menu"
+          }, [
+            createElementVNode("div", _hoisted_3$3, [
+              !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+                createElementVNode("div", _hoisted_5$2, toDisplayString(displayName.value), 1)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_6$2, [
+                createElementVNode("div", _hoisted_7$2, [
+                  user.value?.avatar ? (openBlock(), createElementBlock("img", {
+                    key: 0,
+                    src: user.value.avatar,
+                    alt: `${user.value.firstName || user.value.email}'s avatar`,
+                    class: "avatar-image",
+                    width: "32",
+                    height: "32",
+                    loading: "eager"
+                  }, null, 8, _hoisted_8$2)) : (openBlock(), createElementBlock("div", _hoisted_9$2, [..._cache[1] || (_cache[1] = [
                     createElementVNode("svg", {
-                      class: "modal-close-icon",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24"
+                      class: "avatar-icon",
+                      fill: "currentColor",
+                      viewBox: "0 0 20 20"
                     }, [
                       createElementVNode("path", {
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round",
-                        "stroke-width": "2",
-                        d: "M6 18L18 6M6 6l12 12"
+                        "fill-rule": "evenodd",
+                        d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+                        "clip-rule": "evenodd"
                       })
                     ], -1)
-                  ])])
+                  ])]))
                 ])
               ]),
+              (openBlock(), createElementBlock("svg", {
+                class: normalizeClass(["dropdown-arrow", { "dropdown-arrow-open": showDropdown.value }]),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [..._cache[2] || (_cache[2] = [
+                createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M19 9l-7 7-7-7"
+                }, null, -1)
+              ])], 2))
+            ]),
+            createVNode(Transition, { name: "dropdown" }, {
               default: withCtx(() => [
+                showDropdown.value ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass([
+                    "dropdown-menu",
+                    `dropdown-menu-align-${props.menuAlign}`,
+                    `dropdown-menu-vertical-${props.menuVerticalAlign}`
+                  ]),
+                  role: "menu",
+                  "aria-orientation": "vertical",
+                  onKeydown: [
+                    withKeys(closeDropdown, ["escape"]),
+                    withKeys(withModifiers(focusPrevious, ["prevent"]), ["arrow-up"]),
+                    withKeys(withModifiers(focusNext, ["prevent"]), ["arrow-down"]),
+                    withKeys(withModifiers(focusFirst, ["prevent"]), ["home"]),
+                    withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
+                  ]
+                }, [
+                  createElementVNode("div", _hoisted_11$2, [
+                    createElementVNode("div", _hoisted_12$2, [
+                      user.value ? (openBlock(), createElementBlock("div", _hoisted_13$2, [
+                        createVNode(unref(StrandsUiLevelProgress), {
+                          size: 80,
+                          value: user.value.xp,
+                          max: user.value.next_level_xp,
+                          level: user.value.level,
+                          "level-label": `LEVEL ${user.value.level}`,
+                          "user-settings": user.value.settings,
+                          class: "level-progress-overlay"
+                        }, null, 8, ["value", "max", "level", "level-label", "user-settings"]),
+                        user.value?.avatar ? (openBlock(), createElementBlock("img", {
+                          key: 0,
+                          src: user.value.avatar,
+                          alt: `${user.value.firstName || user.value.email}'s avatar`,
+                          class: "dropdown-avatar-image",
+                          width: "64",
+                          height: "64"
+                        }, null, 8, _hoisted_14$2)) : (openBlock(), createElementBlock("div", _hoisted_15$2, [..._cache[3] || (_cache[3] = [
+                          createElementVNode("svg", {
+                            class: "dropdown-avatar-icon",
+                            fill: "currentColor",
+                            viewBox: "0 0 20 20"
+                          }, [
+                            createElementVNode("path", {
+                              "fill-rule": "evenodd",
+                              d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+                              "clip-rule": "evenodd"
+                            })
+                          ], -1)
+                        ])]))
+                      ])) : createCommentVNode("", true),
+                      createElementVNode("div", _hoisted_16$2, [
+                        createElementVNode("div", _hoisted_17$2, toDisplayString(displayName.value), 1),
+                        createElementVNode("div", _hoisted_18$2, toDisplayString(user.value?.email), 1)
+                      ])
+                    ]),
+                    _cache[6] || (_cache[6] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
+                    renderSlot(_ctx.$slots, "default", {}, void 0, true),
+                    _cache[7] || (_cache[7] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
+                    createVNode(unref(StrandsNav), null, {
+                      default: withCtx(() => [
+                        createVNode(unref(StrandsNav).Item, { onClick: openProfile }, {
+                          default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                            createTextVNode("Profile", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        createVNode(unref(StrandsNav).Item, {
+                          onClick: handleSignOut,
+                          color: "danger"
+                        }, {
+                          default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                            createTextVNode("Sign Out", -1)
+                          ])]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ], 42, _hoisted_10$2)) : createCommentVNode("", true)
+              ]),
+              _: 3
+            })
+          ], 42, _hoisted_2$3),
+          createVNode(UiModal, {
+            open: showProfileModal.value,
+            onClose: closeProfile,
+            "fullscreen-on-mobile": false
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(StrandsUserProfile), {
+                user: user.value,
+                onProfileUpdated: handleProfileUpdated,
+                onError: handleProfileError,
+                "in-modal": ""
+              }, null, 8, ["user"])
+            ]),
+            _: 1
+          }, 8, ["open"])
+        ])) : (openBlock(), createElementBlock("div", _hoisted_19$1, [
+          createElementVNode("button", {
+            onClick: openSignIn,
+            class: "sign-in-button",
+            "aria-label": "Sign in"
+          }, [..._cache[8] || (_cache[8] = [
+            createElementVNode("svg", {
+              class: "sign-in-icon",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24"
+            }, [
+              createElementVNode("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+              })
+            ], -1),
+            createElementVNode("span", null, "Sign In", -1)
+          ])]),
+          createVNode(UiModal, {
+            modelValue: showSignInModal.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showSignInModal.value = $event),
+            onClose: closeSignIn,
+            "fullscreen-on-mobile": false
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_20$1, [
                 createVNode(unref(StrandsAuth), {
                   onSignedIn: handleSignedIn,
                   onError: handleSignInError,
                   "redirect-url": _ctx.redirectUrl,
                   "in-modal": ""
                 }, null, 8, ["redirect-url"])
-              ]),
-              _: 1
-            }, 8, ["open"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("button", {
-              onClick: toggleDropdown,
-              onKeydown: [
-                withKeys(toggleDropdown, ["enter"]),
-                withKeys(withModifiers(toggleDropdown, ["prevent"]), ["space"]),
-                withKeys(closeDropdown, ["escape"]),
-                withKeys(withModifiers(openDropdown, ["prevent"]), ["arrow-down"])
-              ],
-              class: normalizeClass(["user-button", { "user-button-active": showDropdown.value }]),
-              "aria-haspopup": "true",
-              "aria-expanded": showDropdown.value,
-              "aria-label": "User menu"
-            }, [
-              createElementVNode("div", _hoisted_2$3, [
-                !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
-                  createElementVNode("div", _hoisted_4$3, toDisplayString(displayName.value), 1)
-                ])) : createCommentVNode("", true),
-                createElementVNode("div", _hoisted_5$2, [
-                  createElementVNode("div", _hoisted_6$2, [
-                    user.value?.avatar ? (openBlock(), createElementBlock("img", {
-                      key: 0,
-                      src: user.value.avatar,
-                      alt: `${user.value.firstName || user.value.email}'s avatar`,
-                      class: "avatar-image",
-                      width: "32",
-                      height: "32",
-                      loading: "eager"
-                    }, null, 8, _hoisted_7$2)) : (openBlock(), createElementBlock("div", _hoisted_8$2, [..._cache[1] || (_cache[1] = [
-                      createElementVNode("svg", {
-                        class: "avatar-icon",
-                        fill: "currentColor",
-                        viewBox: "0 0 20 20"
-                      }, [
-                        createElementVNode("path", {
-                          "fill-rule": "evenodd",
-                          d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
-                          "clip-rule": "evenodd"
-                        })
-                      ], -1)
-                    ])]))
-                  ])
-                ]),
-                (openBlock(), createElementBlock("svg", {
-                  class: normalizeClass(["dropdown-arrow", { "dropdown-arrow-open": showDropdown.value }]),
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24"
-                }, [..._cache[2] || (_cache[2] = [
-                  createElementVNode("path", {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    "stroke-width": "2",
-                    d: "M19 9l-7 7-7-7"
-                  }, null, -1)
-                ])], 2))
-              ]),
-              createVNode(Transition, { name: "dropdown" }, {
-                default: withCtx(() => [
-                  showDropdown.value ? (openBlock(), createElementBlock("div", {
-                    key: 0,
-                    class: normalizeClass([
-                      "dropdown-menu",
-                      `dropdown-menu-align-${props.menuAlign}`,
-                      `dropdown-menu-vertical-${props.menuVerticalAlign}`
-                    ]),
-                    role: "menu",
-                    "aria-orientation": "vertical",
-                    onKeydown: [
-                      withKeys(closeDropdown, ["escape"]),
-                      withKeys(withModifiers(focusPrevious, ["prevent"]), ["arrow-up"]),
-                      withKeys(withModifiers(focusNext, ["prevent"]), ["arrow-down"]),
-                      withKeys(withModifiers(focusFirst, ["prevent"]), ["home"]),
-                      withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
-                    ]
-                  }, [
-                    createElementVNode("div", _hoisted_10$2, [
-                      createElementVNode("div", _hoisted_11$2, [
-                        user.value ? (openBlock(), createElementBlock("div", _hoisted_12$2, [
-                          createVNode(unref(StrandsUiLevelProgress), {
-                            size: 80,
-                            value: user.value.xp,
-                            max: user.value.next_level_xp,
-                            level: user.value.level,
-                            "level-label": `LEVEL ${user.value.level}`,
-                            "user-settings": user.value.settings,
-                            class: "level-progress-overlay"
-                          }, null, 8, ["value", "max", "level", "level-label", "user-settings"]),
-                          user.value?.avatar ? (openBlock(), createElementBlock("img", {
-                            key: 0,
-                            src: user.value.avatar,
-                            alt: `${user.value.firstName || user.value.email}'s avatar`,
-                            class: "dropdown-avatar-image",
-                            width: "64",
-                            height: "64"
-                          }, null, 8, _hoisted_13$2)) : (openBlock(), createElementBlock("div", _hoisted_14$2, [..._cache[3] || (_cache[3] = [
-                            createElementVNode("svg", {
-                              class: "dropdown-avatar-icon",
-                              fill: "currentColor",
-                              viewBox: "0 0 20 20"
-                            }, [
-                              createElementVNode("path", {
-                                "fill-rule": "evenodd",
-                                d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
-                                "clip-rule": "evenodd"
-                              })
-                            ], -1)
-                          ])]))
-                        ])) : createCommentVNode("", true),
-                        createElementVNode("div", _hoisted_15$2, [
-                          createElementVNode("div", _hoisted_16$2, toDisplayString(displayName.value), 1),
-                          createElementVNode("div", _hoisted_17$2, toDisplayString(user.value?.email), 1)
-                        ])
-                      ]),
-                      _cache[6] || (_cache[6] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                      renderSlot(_ctx.$slots, "default", {}, void 0, true),
-                      _cache[7] || (_cache[7] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                      createVNode(unref(StrandsNav), null, {
-                        default: withCtx(() => [
-                          createVNode(unref(StrandsNav).Item, { onClick: openProfile }, {
-                            default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                              createTextVNode("Profile", -1)
-                            ])]),
-                            _: 1
-                          }),
-                          createVNode(unref(StrandsNav).Item, {
-                            onClick: handleSignOut,
-                            color: "danger"
-                          }, {
-                            default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                              createTextVNode("Sign Out", -1)
-                            ])]),
-                            _: 1
-                          })
-                        ]),
-                        _: 1
-                      })
-                    ])
-                  ], 42, _hoisted_9$2)) : createCommentVNode("", true)
-                ]),
-                _: 3
-              })
-            ], 42, _hoisted_1$4),
-            createVNode(UiModal, {
-              open: showProfileModal.value,
-              onClose: closeProfile,
-              "fullscreen-on-mobile": false
-            }, {
-              header: withCtx(() => [
-                createElementVNode("div", { class: "modal-header" }, [
-                  _cache[9] || (_cache[9] = createElementVNode("h2", { class: "modal-title" }, "User Profile", -1)),
-                  createElementVNode("button", {
-                    onClick: closeProfile,
-                    class: "modal-close-button",
-                    "aria-label": "Close profile"
-                  }, [..._cache[8] || (_cache[8] = [
-                    createElementVNode("svg", {
-                      class: "modal-close-icon",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24"
-                    }, [
-                      createElementVNode("path", {
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round",
-                        "stroke-width": "2",
-                        d: "M6 18L18 6M6 6l12 12"
-                      })
-                    ], -1)
-                  ])])
-                ])
-              ]),
-              default: withCtx(() => [
-                createVNode(unref(StrandsUserProfile), {
-                  user: user.value,
-                  onProfileUpdated: handleProfileUpdated,
-                  onError: handleProfileError,
-                  "in-modal": ""
-                }, null, 8, ["user"])
-              ]),
-              _: 1
-            }, 8, ["open"])
-          ]),
-          _: 3
-        }, 8, ["invert"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]))
       ], 512);
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ae05f8c9"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-20ad1bfa"]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {