@strands.gg/accui 2.12.1 → 2.14.0

package/dist/index.es.js

@@ -290,13 +290,13 @@ const _hoisted_12$k = ["cx", "cy", "r"];
 const _hoisted_13$i = ["width", "height"];
 const _hoisted_14$i = { class: "crop-svg" };
 const _hoisted_15$f = ["cx", "cy", "r"];
-const _hoisted_16$e = { class: "controls" };
-const _hoisted_17$d = { class: "zoom-control" };
-const _hoisted_18$d = ["min", "max"];
-const _hoisted_19$c = { class: "action-buttons" };
-const _hoisted_20$a = { class: "preview-section" };
-const _hoisted_21$a = { class: "preview-container" };
-const _hoisted_22$7 = ["width", "height"];
+const _hoisted_16$f = { class: "controls" };
+const _hoisted_17$e = { class: "zoom-control" };
+const _hoisted_18$e = ["min", "max"];
+const _hoisted_19$d = { class: "action-buttons" };
+const _hoisted_20$b = { class: "preview-section" };
+const _hoisted_21$b = { class: "preview-container" };
+const _hoisted_22$8 = ["width", "height"];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "UiAvatarEditor",
   props: {
@@ -665,8 +665,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   ]))
                 ])
               ]),
-              createElementVNode("div", _hoisted_16$e, [
-                createElementVNode("div", _hoisted_17$d, [
+              createElementVNode("div", _hoisted_16$f, [
+                createElementVNode("div", _hoisted_17$e, [
                   createVNode(StrandsUiButton, {
                     onClick: _cache[2] || (_cache[2] = ($event) => {
                       zoom.value = Math.max(minZoom.value, zoom.value - 0.1);
@@ -695,7 +695,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                       constrainImagePosition();
                       updateCanvas();
                     })
-                  }, null, 40, _hoisted_18$d), [
+                  }, null, 40, _hoisted_18$e), [
                     [
                       vModelText,
                       zoom.value,
@@ -721,7 +721,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createElementVNode("div", _hoisted_19$c, [
+                createElementVNode("div", _hoisted_19$d, [
                   createVNode(StrandsUiButton, {
                     onClick: resetImage,
                     variant: "outline",
@@ -757,16 +757,16 @@ const _sfc_main$D = /* @__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$a, [
+              createElementVNode("div", _hoisted_21$b, [
                 createElementVNode("canvas", {
                   ref_key: "previewCanvas",
                   ref: previewCanvas,
                   width: previewSize.value,
                   height: previewSize.value,
                   class: "preview-canvas"
-                }, null, 8, _hoisted_22$7)
+                }, null, 8, _hoisted_22$8)
               ]),
               _cache[10] || (_cache[10] = createElementVNode("p", { class: "preview-instructions" }, [
                 createTextVNode(" Drag image to reposition"),
@@ -2427,16 +2427,16 @@ const _hoisted_12$i = { class: "ui-color-picker-contrast-header" };
 const _hoisted_13$h = { class: "ui-color-picker-contrast-colors" };
 const _hoisted_14$h = { class: "ui-color-picker-contrast-color-demo" };
 const _hoisted_15$e = { 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$c = { class: "ui-color-picker-contrast-level-value" };
-const _hoisted_19$b = { class: "ui-color-picker-contrast-graph" };
-const _hoisted_20$9 = {
+const _hoisted_16$e = { class: "ui-color-picker-contrast-levels" };
+const _hoisted_17$d = { class: "ui-color-picker-contrast-level-value" };
+const _hoisted_18$d = { class: "ui-color-picker-contrast-level-value" };
+const _hoisted_19$c = { class: "ui-color-picker-contrast-graph" };
+const _hoisted_20$a = {
   viewBox: "0 0 280 40",
   class: "ui-color-picker-contrast-svg"
 };
-const _hoisted_21$9 = ["cx", "fill"];
-const _hoisted_22$6 = { class: "ui-color-picker-inputs" };
+const _hoisted_21$a = ["cx", "fill"];
+const _hoisted_22$7 = { class: "ui-color-picker-inputs" };
 const _hoisted_23$5 = {
   key: 0,
   class: "ui-color-picker-input-row"
@@ -4233,7 +4233,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_15$e, toDisplayString(contrastData.value.ratio.toFixed(2)) + ":1 ", 1)
               ])
             ]),
-            createElementVNode("div", _hoisted_16$d, [
+            createElementVNode("div", _hoisted_16$e, [
               createElementVNode("div", {
                 class: normalizeClass(["ui-color-picker-contrast-level", {
                   "ui-color-picker-contrast-level--pass": contrastData.value.normalText !== "FAIL",
@@ -4244,7 +4244,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", { class: "ui-color-picker-contrast-level-line ui-color-picker-contrast-level-line--solid" }),
                   createElementVNode("span", { class: "ui-color-picker-contrast-level-label" }, "Normal Text")
                 ], -1)),
-                createElementVNode("span", _hoisted_17$c, toDisplayString(contrastData.value.normalText), 1)
+                createElementVNode("span", _hoisted_17$d, toDisplayString(contrastData.value.normalText), 1)
               ], 2),
               createElementVNode("div", {
                 class: normalizeClass(["ui-color-picker-contrast-level", {
@@ -4256,11 +4256,11 @@ const _sfc_main$A = /* @__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$c, toDisplayString(contrastData.value.largeText), 1)
+                createElementVNode("span", _hoisted_18$d, toDisplayString(contrastData.value.largeText), 1)
               ], 2)
             ]),
-            createElementVNode("div", _hoisted_19$b, [
-              (openBlock(), createElementBlock("svg", _hoisted_20$9, [
+            createElementVNode("div", _hoisted_19$c, [
+              (openBlock(), createElementBlock("svg", _hoisted_20$a, [
                 _cache[21] || (_cache[21] = createStaticVNode('<defs data-v-24473a61><linearGradient id="contrastGradientDefault" x1="0%" y1="0%" x2="100%" y2="0%" data-v-24473a61><stop offset="0%" stop-color="#ef4444" data-v-24473a61></stop><stop offset="21.4%" stop-color="#ef4444" data-v-24473a61></stop><stop offset="21.4%" stop-color="#f59e0b" data-v-24473a61></stop><stop offset="64.3%" stop-color="#f59e0b" data-v-24473a61></stop><stop offset="64.3%" stop-color="#22c55e" data-v-24473a61></stop><stop offset="100%" stop-color="#22c55e" data-v-24473a61></stop></linearGradient></defs><rect x="0" y="15" width="280" height="10" fill="url(#contrastGradientDefault)" rx="5" data-v-24473a61></rect><line x1="60" y1="10" x2="60" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-24473a61></line><line x1="180" y1="10" x2="180" y2="30" stroke="#666" stroke-width="1" opacity="0.5" data-v-24473a61></line>', 4)),
                 createElementVNode("circle", {
                   cx: Math.min(270, Math.max(10, Math.min(contrastData.value.ratio, 14) / 14 * 260 + 10)),
@@ -4269,7 +4269,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                   fill: contrastData.value.normalText === "FAIL" ? "#ef4444" : "#22c55e",
                   stroke: "white",
                   "stroke-width": "2"
-                }, null, 8, _hoisted_21$9)
+                }, null, 8, _hoisted_21$a)
               ])),
               _cache[22] || (_cache[22] = createStaticVNode('<div class="ui-color-picker-contrast-labels" data-v-24473a61><span class="ui-color-picker-contrast-label" data-v-24473a61>1:1</span><span class="ui-color-picker-contrast-label" style="left:60px;" data-v-24473a61>3:1</span><span class="ui-color-picker-contrast-label" style="left:180px;" data-v-24473a61>4.5:1</span><span class="ui-color-picker-contrast-label" style="right:0;" data-v-24473a61>14:1+</span></div>', 1))
             ])
@@ -4295,7 +4295,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({ left: `${alpha.value * 100}%` })
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_22$6, [
+        createElementVNode("div", _hoisted_22$7, [
           currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$5, [
             createElementVNode("div", _hoisted_24$5, [
               _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
@@ -4888,16 +4888,16 @@ const _hoisted_12$h = { class: "ui-table-body" };
 const _hoisted_13$g = { class: "ui-table-group-content" };
 const _hoisted_14$g = { class: "ui-table-group-name" };
 const _hoisted_15$d = { class: "ui-table-group-count" };
-const _hoisted_16$c = ["onClick"];
-const _hoisted_17$b = ["onClick"];
-const _hoisted_18$b = { key: 1 };
-const _hoisted_19$a = { class: "ui-table-subrow-content" };
-const _hoisted_20$8 = { class: "ui-table-subrow-default" };
-const _hoisted_21$8 = {
+const _hoisted_16$d = ["onClick"];
+const _hoisted_17$c = ["onClick"];
+const _hoisted_18$c = { key: 1 };
+const _hoisted_19$b = { class: "ui-table-subrow-content" };
+const _hoisted_20$9 = { class: "ui-table-subrow-default" };
+const _hoisted_21$9 = {
   key: 0,
   class: "ui-table-empty"
 };
-const _hoisted_22$5 = {
+const _hoisted_22$6 = {
   key: 1,
   class: "ui-table-footer"
 };
@@ -5422,22 +5422,22 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                             ]),
                             key: "1"
                           } : void 0
-                        ]), 1032, ["modelValue", "type", "options", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("span", _hoisted_18$b, toDisplayString(getCellValue(row, column.key, column)), 1))
+                        ]), 1032, ["modelValue", "type", "options", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("span", _hoisted_18$c, toDisplayString(getCellValue(row, column.key, column)), 1))
                       ], true)
-                    ], 14, _hoisted_17$b);
+                    ], 14, _hoisted_17$c);
                   }), 128))
-                ], 10, _hoisted_16$c)),
+                ], 10, _hoisted_16$d)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
                   style: normalizeStyle(subrowStyle.value)
                 }, [
-                  createElementVNode("div", _hoisted_19$a, [
+                  createElementVNode("div", _hoisted_19$b, [
                     renderSlot(_ctx.$slots, "expanded-row", {
                       row,
                       rowIndex
                     }, () => [
-                      createElementVNode("div", _hoisted_20$8, [
+                      createElementVNode("div", _hoisted_20$9, [
                         createElementVNode("pre", null, toDisplayString(JSON.stringify(row, null, 2)), 1)
                       ])
                     ], true)
@@ -5445,7 +5445,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 ], 4)) : createCommentVNode("", true)
               ], 64);
             }), 128)),
-            processedRows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_21$8, [
+            processedRows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_21$9, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
                 _cache[5] || (_cache[5] = createElementVNode("div", { class: "ui-table-empty-content" }, [
                   createElementVNode("span", null, "No data available")
@@ -5453,7 +5453,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               ], true)
             ])) : createCommentVNode("", true)
           ]),
-          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$5, [
+          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$6, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(internalColumns.value, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `footer-${index}`,
@@ -6394,28 +6394,28 @@ const _hoisted_13$e = {
 };
 const _hoisted_14$e = ["id", "checked", "indeterminate"];
 const _hoisted_15$c = { class: "checkbox-button" };
-const _hoisted_16$b = {
+const _hoisted_16$c = {
   key: 0,
   class: "checkbox-check",
   viewBox: "0 0 20 20",
   fill: "currentColor"
 };
-const _hoisted_17$a = {
+const _hoisted_17$b = {
   key: 1,
   class: "checkbox-indeterminate",
   viewBox: "0 0 20 20",
   fill: "currentColor"
 };
-const _hoisted_18$a = ["for"];
-const _hoisted_19$9 = {
+const _hoisted_18$b = ["for"];
+const _hoisted_19$a = {
   key: 3,
   class: "checkbox-help"
 };
-const _hoisted_20$7 = {
+const _hoisted_20$8 = {
   key: 0,
   class: "checkbox-error-text"
 };
-const _hoisted_21$7 = {
+const _hoisted_21$8 = {
   key: 1,
   class: "checkbox-help-text"
 };
@@ -6592,13 +6592,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               onChange: handleSelectAll
             }, null, 40, _hoisted_14$e),
             createElementVNode("div", _hoisted_15$c, [
-              isAllSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_16$b, [..._cache[2] || (_cache[2] = [
+              isAllSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_16$c, [..._cache[2] || (_cache[2] = [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
                   "clip-rule": "evenodd"
                 }, null, -1)
-              ])])) : isSomeSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_17$a, [..._cache[3] || (_cache[3] = [
+              ])])) : isSomeSelected.value ? (openBlock(), createElementBlock("svg", _hoisted_17$b, [..._cache[3] || (_cache[3] = [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z",
@@ -6609,11 +6609,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             createElementVNode("label", {
               for: `${_ctx.fieldId}-select-all`,
               class: "checkbox-label"
-            }, toDisplayString(_ctx.selectAllLabel), 9, _hoisted_18$a)
+            }, toDisplayString(_ctx.selectAllLabel), 9, _hoisted_18$b)
           ], 2)
         ])) : createCommentVNode("", true),
-        _ctx.helpText || _ctx.error ? (openBlock(), createElementBlock("div", _hoisted_19$9, [
-          _ctx.error ? (openBlock(), createElementBlock("p", _hoisted_20$7, toDisplayString(_ctx.error), 1)) : _ctx.helpText ? (openBlock(), createElementBlock("p", _hoisted_21$7, toDisplayString(_ctx.helpText), 1)) : createCommentVNode("", true)
+        _ctx.helpText || _ctx.error ? (openBlock(), createElementBlock("div", _hoisted_19$a, [
+          _ctx.error ? (openBlock(), createElementBlock("p", _hoisted_20$8, toDisplayString(_ctx.error), 1)) : _ctx.helpText ? (openBlock(), createElementBlock("p", _hoisted_21$8, toDisplayString(_ctx.helpText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
@@ -6998,19 +6998,19 @@ const _hoisted_13$d = {
 };
 const _hoisted_14$d = { class: "mfa-single-method-content" };
 const _hoisted_15$b = { class: "mfa-single-method-name" };
-const _hoisted_16$a = { class: "mfa-single-method-type" };
-const _hoisted_17$9 = {
+const _hoisted_16$b = { class: "mfa-single-method-type" };
+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$6 = { class: "mfa-hardware-prompt-content" };
-const _hoisted_21$6 = { class: "mfa-hardware-prompt-icon" };
-const _hoisted_22$4 = { class: "mfa-hardware-prompt-text" };
+const _hoisted_19$9 = { class: "mfa-hardware-prompt" };
+const _hoisted_20$7 = { class: "mfa-hardware-prompt-content" };
+const _hoisted_21$7 = { class: "mfa-hardware-prompt-icon" };
+const _hoisted_22$5 = { class: "mfa-hardware-prompt-text" };
 const _hoisted_23$4 = { class: "mfa-hardware-prompt-title" };
 const _hoisted_24$4 = { class: "mfa-hardware-prompt-description" };
 const _hoisted_25$4 = { class: "mfa-backup-option" };
@@ -7487,11 +7487,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     })),
                     createElementVNode("div", null, [
                       createElementVNode("h3", _hoisted_15$b, toDisplayString(selectedMethod.value.device_name), 1),
-                      createElementVNode("p", _hoisted_16$a, toDisplayString(unref(getDeviceTypeName)(selectedMethod.value.device_type)), 1)
+                      createElementVNode("p", _hoisted_16$b, toDisplayString(unref(getDeviceTypeName)(selectedMethod.value.device_type)), 1)
                     ])
                   ])
                 ])) : createCommentVNode("", true),
-                selectedMethod.value?.device_type === "email" && !emailCodeSent.value ? (openBlock(), createElementBlock("div", _hoisted_17$9, [
+                selectedMethod.value?.device_type === "email" && !emailCodeSent.value ? (openBlock(), createElementBlock("div", _hoisted_17$a, [
                   _cache[10] || (_cache[10] = createElementVNode("p", { class: "mfa-email-request-text" }, "Click below to receive your verification code", -1)),
                   createVNode(unref(CompoundUiButton), {
                     variant: "primary",
@@ -7505,16 +7505,16 @@ const _sfc_main$p = /* @__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$6, [
-                      createElementVNode("div", _hoisted_21$6, [
+                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$7, [
+                      createElementVNode("div", _hoisted_21$7, [
                         (openBlock(), createBlock(resolveDynamicComponent(selectedMethod.value.device_type === "passkey" ? IconShield : IconKeyRound), {
                           size: 24,
                           class: "mfa-hardware-icon-svg"
                         }))
                       ]),
-                      createElementVNode("div", _hoisted_22$4, [
+                      createElementVNode("div", _hoisted_22$5, [
                         createElementVNode("h4", _hoisted_23$4, toDisplayString(selectedMethod.value.device_type === "passkey" ? "Use your passkey" : "Touch your hardware key"), 1),
                         createElementVNode("p", _hoisted_24$4, toDisplayString(selectedMethod.value.device_type === "passkey" ? "Use biometrics, PIN, or device security to authenticate" : "Insert and touch your hardware key to authenticate"), 1)
                       ])
@@ -7983,21 +7983,21 @@ const _hoisted_14$c = {
   class: "auth-oauth-generic-icon"
 };
 const _hoisted_15$a = { class: "auth-oauth-generic-text" };
-const _hoisted_16$9 = { class: "auth-oauth-text" };
-const _hoisted_17$8 = {
+const _hoisted_16$a = { class: "auth-oauth-text" };
+const _hoisted_17$9 = {
   key: 0,
   class: "auth-divider"
 };
-const _hoisted_18$8 = { class: "auth-divider-text" };
-const _hoisted_19$7 = {
+const _hoisted_18$9 = { class: "auth-divider-text" };
+const _hoisted_19$8 = {
   key: 0,
   class: "auth-password-field"
 };
-const _hoisted_20$5 = {
+const _hoisted_20$6 = {
   key: 0,
   class: "auth-back-link-container"
 };
-const _hoisted_21$5 = { class: "auth-support-text" };
+const _hoisted_21$6 = { class: "auth-support-text" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "StrandsAuth",
   props: {
@@ -8369,7 +8369,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                               createElementVNode("span", _hoisted_15$a, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
                             ]))
                           ]),
-                          createElementVNode("span", _hoisted_16$9, " Continue with " + toDisplayString(provider.displayName || provider.name.charAt(0).toUpperCase() + provider.name.slice(1)), 1)
+                          createElementVNode("span", _hoisted_16$a, " Continue with " + toDisplayString(provider.displayName || provider.name.charAt(0).toUpperCase() + provider.name.slice(1)), 1)
                         ]),
                         _: 2
                       }, 1032, ["disabled", "onClick"]);
@@ -8387,8 +8387,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_17$8, [
-                    createElementVNode("span", _hoisted_18$8, "Or " + toDisplayString(isSignUp.value ? "create account" : "sign in") + " with email", 1)
+                  !isPasswordReset.value && displayProviders.value?.length ? (openBlock(), createElementBlock("div", _hoisted_17$9, [
+                    createElementVNode("span", _hoisted_18$9, "Or " + toDisplayString(isSignUp.value ? "create account" : "sign in") + " with email", 1)
                   ])) : createCommentVNode("", true)
                 ]),
                 _: 1
@@ -8421,7 +8421,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     onAfterLeave
                   }, {
                     default: withCtx(() => [
-                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_19$7, [
+                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_19$8, [
                         createVNode(unref(StrandsUiInput), {
                           modelValue: form.password,
                           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => form.password = $event),
@@ -8488,7 +8488,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_20$5, [
+                  isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_20$6, [
                     createVNode(unref(StrandsUiLink), {
                       onClick: _cache[4] || (_cache[4] = ($event) => currentMode.value = "signin"),
                       class: "auth-back-link"
@@ -8532,7 +8532,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     name: "support-fade"
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("p", _hoisted_21$5, [
+                      createElementVNode("p", _hoisted_21$6, [
                         _cache[12] || (_cache[12] = createTextVNode(" Need help? ", -1)),
                         createVNode(unref(StrandsUiLink), {
                           variant: "primary",
@@ -8636,10 +8636,10 @@ const _hoisted_13$b = {
 };
 const _hoisted_14$b = { class: "accui-form-group" };
 const _hoisted_15$9 = { class: "accui-input-wrapper" };
-const _hoisted_16$8 = { class: "accui-form-group" };
-const _hoisted_17$7 = { class: "accui-input-wrapper" };
-const _hoisted_18$7 = { class: "accui-auth-links" };
-const _hoisted_19$6 = { class: "accui-auth-link-text" };
+const _hoisted_16$9 = { class: "accui-form-group" };
+const _hoisted_17$8 = { class: "accui-input-wrapper" };
+const _hoisted_18$8 = { class: "accui-auth-links" };
+const _hoisted_19$7 = { class: "accui-auth-link-text" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "StrandsSignIn",
   props: {
@@ -8807,9 +8807,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                     ])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_16$8, [
+                createElementVNode("div", _hoisted_16$9, [
                   _cache[11] || (_cache[11] = createElementVNode("label", { class: "accui-form-label" }, "Password", -1)),
-                  createElementVNode("div", _hoisted_17$7, [
+                  createElementVNode("div", _hoisted_17$8, [
                     _cache[10] || (_cache[10] = createElementVNode("svg", {
                       class: "accui-input-icon",
                       viewBox: "0 0 20 20",
@@ -8857,8 +8857,8 @@ const _sfc_main$k = /* @__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")),
@@ -8926,24 +8926,24 @@ const _hoisted_15$8 = {
   key: 0,
   class: "oauth-icon"
 };
-const _hoisted_16$7 = ["src", "alt"];
-const _hoisted_17$6 = {
+const _hoisted_16$8 = ["src", "alt"];
+const _hoisted_17$7 = {
   key: 1,
   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$4 = { class: "oauth-icon-fallback-text" };
-const _hoisted_21$4 = { class: "oauth-button-text" };
-const _hoisted_22$3 = {
+const _hoisted_20$5 = { class: "oauth-icon-fallback-text" };
+const _hoisted_21$5 = { class: "oauth-button-text" };
+const _hoisted_22$4 = {
   key: 1,
   class: "divider-with-text"
 };
@@ -9140,8 +9140,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                             class: "oauth-icon-image",
                             width: "20",
                             height: "20"
-                          }, null, 8, _hoisted_16$7)
-                        ])) : provider.id === "google" ? (openBlock(), createElementBlock("svg", _hoisted_17$6, [..._cache[6] || (_cache[6] = [
+                          }, null, 8, _hoisted_16$8)
+                        ])) : provider.id === "google" ? (openBlock(), createElementBlock("svg", _hoisted_17$7, [..._cache[6] || (_cache[6] = [
                           createElementVNode("path", {
                             fill: "#4285F4",
                             d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
@@ -9158,19 +9158,19 @@ const _sfc_main$j = /* @__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$4, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
+                        ])])) : (openBlock(), createElementBlock("div", _hoisted_19$6, [
+                          createElementVNode("span", _hoisted_20$5, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
                         ]))
                       ]),
-                      createElementVNode("span", _hoisted_21$4, "Continue with " + toDisplayString(provider.displayName || provider.name), 1)
+                      createElementVNode("span", _hoisted_21$5, "Continue with " + toDisplayString(provider.displayName || provider.name), 1)
                     ]),
                     _: 2
                   }, 1032, ["disabled", "onClick"]);
                 }), 128))
               ])) : createCommentVNode("", true),
-              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$3, [..._cache[8] || (_cache[8] = [
+              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$4, [..._cache[8] || (_cache[8] = [
                 createElementVNode("span", { class: "divider-text" }, "Or create account with email", -1)
               ])])) : createCommentVNode("", true),
               createElementVNode("form", {
@@ -9648,10 +9648,10 @@ const _hoisted_14$8 = {
   class: "totp-setup-step"
 };
 const _hoisted_15$7 = { class: "totp-setup-backup-codes" };
-const _hoisted_16$6 = { class: "totp-setup-backup-grid-wrapper" };
-const _hoisted_17$5 = { class: "totp-setup-backup-grid" };
-const _hoisted_18$5 = { class: "totp-setup-backup-actions" };
-const _hoisted_19$4 = { class: "totp-setup-final-actions" };
+const _hoisted_16$7 = { class: "totp-setup-backup-grid-wrapper" };
+const _hoisted_17$6 = { class: "totp-setup-backup-grid" };
+const _hoisted_18$6 = { class: "totp-setup-backup-actions" };
+const _hoisted_19$5 = { class: "totp-setup-final-actions" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "StrandsTotpSetupModal",
   props: {
@@ -9934,8 +9934,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   createElementVNode("p", { class: "totp-setup-backup-header-description" }, " Store these codes in a safe place. Each code can only be used once. ")
                 ])
               ], -1)),
-              createElementVNode("div", _hoisted_16$6, [
-                createElementVNode("div", _hoisted_17$5, [
+              createElementVNode("div", _hoisted_16$7, [
+                createElementVNode("div", _hoisted_17$6, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(totpSetupData.value?.backup_codes, (code, index) => {
                     return openBlock(), createElementBlock("div", {
                       key: index,
@@ -9944,7 +9944,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_18$5, [
+              createElementVNode("div", _hoisted_18$6, [
                 createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   size: "sm",
@@ -9957,7 +9957,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            createElementVNode("div", _hoisted_19$4, [
+            createElementVNode("div", _hoisted_19$5, [
               createVNode(unref(CompoundUiButton), {
                 variant: "primary",
                 onClick: finish
@@ -10325,15 +10325,15 @@ const _hoisted_12$7 = {
 const _hoisted_13$7 = { class: "hardware-key-setup-backup-codes" };
 const _hoisted_14$7 = { class: "hardware-key-setup-codes-container" };
 const _hoisted_15$6 = { class: "hardware-key-setup-codes-grid" };
-const _hoisted_16$5 = { class: "hardware-key-setup-copy-action" };
-const _hoisted_17$4 = { class: "hardware-key-setup-final-action" };
-const _hoisted_18$4 = {
+const _hoisted_16$6 = { class: "hardware-key-setup-copy-action" };
+const _hoisted_17$5 = { class: "hardware-key-setup-final-action" };
+const _hoisted_18$5 = {
   key: 4,
   class: "hardware-key-setup-step"
 };
-const _hoisted_19$3 = { class: "hardware-key-setup-error" };
-const _hoisted_20$3 = { class: "hardware-key-setup-error-message" };
-const _hoisted_21$3 = { class: "hardware-key-setup-actions" };
+const _hoisted_19$4 = { class: "hardware-key-setup-error" };
+const _hoisted_20$4 = { class: "hardware-key-setup-error-message" };
+const _hoisted_21$4 = { class: "hardware-key-setup-actions" };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "StrandsHardwareKeySetupModal",
   props: {
@@ -10787,7 +10787,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_16$5, [
+              createElementVNode("div", _hoisted_16$6, [
                 createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
                   size: "sm",
@@ -10800,7 +10800,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            createElementVNode("div", _hoisted_17$4, [
+            createElementVNode("div", _hoisted_17$5, [
               createVNode(unref(CompoundUiButton), {
                 variant: "primary",
                 onClick: finish
@@ -10812,8 +10812,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               })
             ])
           ])) : createCommentVNode("", true),
-          step.value === 5 ? (openBlock(), createElementBlock("div", _hoisted_18$4, [
-            createElementVNode("div", _hoisted_19$3, [
+          step.value === 5 ? (openBlock(), createElementBlock("div", _hoisted_18$5, [
+            createElementVNode("div", _hoisted_19$4, [
               _cache[25] || (_cache[25] = createElementVNode("div", { class: "hardware-key-setup-error-icon" }, [
                 createElementVNode("svg", {
                   class: "hardware-key-setup-error-x",
@@ -10830,9 +10830,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ])
               ], -1)),
               _cache[26] || (_cache[26] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registration Failed", -1)),
-              createElementVNode("p", _hoisted_20$3, toDisplayString(errorMessage.value), 1)
+              createElementVNode("p", _hoisted_20$4, toDisplayString(errorMessage.value), 1)
             ]),
-            createElementVNode("div", _hoisted_21$3, [
+            createElementVNode("div", _hoisted_21$4, [
               createVNode(unref(CompoundUiButton), {
                 variant: "secondary",
                 onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1)
@@ -10887,7 +10887,7 @@ const _hoisted_14$6 = {
   class: "backup-codes-regenerate-warning"
 };
 const _hoisted_15$5 = { class: "backup-codes-regenerate-content" };
-const _hoisted_16$4 = { class: "backup-codes-regenerate-actions" };
+const _hoisted_16$5 = { class: "backup-codes-regenerate-actions" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "StrandsBackupCodesModal",
   props: {
@@ -11098,7 +11098,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", null, [
                     _cache[11] || (_cache[11] = createElementVNode("p", { class: "backup-codes-regenerate-title" }, "Regenerate Backup Codes?", -1)),
                     _cache[12] || (_cache[12] = createElementVNode("p", { class: "backup-codes-regenerate-description" }, " This will invalidate all current backup codes. Make sure to save the new ones. ", -1)),
-                    createElementVNode("div", _hoisted_16$4, [
+                    createElementVNode("div", _hoisted_16$5, [
                       createVNode(unref(CompoundUiButton), {
                         variant: "primary",
                         size: "sm",
@@ -11241,13 +11241,13 @@ const _hoisted_12$5 = { class: "mfa-device-option" };
 const _hoisted_13$5 = { class: "mfa-device-option-content" };
 const _hoisted_14$5 = { class: "mfa-device-option-icon" };
 const _hoisted_15$4 = { class: "mfa-device-option" };
-const _hoisted_16$3 = { class: "mfa-device-option-content" };
-const _hoisted_17$3 = { class: "mfa-device-option-icon" };
-const _hoisted_18$3 = { class: "mfa-device-option" };
-const _hoisted_19$2 = { class: "mfa-device-option-content" };
-const _hoisted_20$2 = { class: "mfa-device-option-icon" };
-const _hoisted_21$2 = { class: "mfa-device-option" };
-const _hoisted_22$2 = { class: "mfa-device-option-content" };
+const _hoisted_16$4 = { class: "mfa-device-option-content" };
+const _hoisted_17$4 = { class: "mfa-device-option-icon" };
+const _hoisted_18$4 = { class: "mfa-device-option" };
+const _hoisted_19$3 = { class: "mfa-device-option-content" };
+const _hoisted_20$3 = { class: "mfa-device-option-icon" };
+const _hoisted_21$3 = { class: "mfa-device-option" };
+const _hoisted_22$3 = { class: "mfa-device-option-content" };
 const _hoisted_23$2 = { class: "mfa-device-option-icon" };
 const _hoisted_24$2 = {
   key: 1,
@@ -11515,8 +11515,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                             })
                           ]),
                           createElementVNode("div", _hoisted_15$4, [
-                            createElementVNode("div", _hoisted_16$3, [
-                              createElementVNode("div", _hoisted_17$3, [
+                            createElementVNode("div", _hoisted_16$4, [
+                              createElementVNode("div", _hoisted_17$4, [
                                 createVNode(Mail, { size: 24 })
                               ]),
                               _cache[16] || (_cache[16] = createElementVNode("div", { class: "mfa-device-option-info" }, [
@@ -11535,9 +11535,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                               _: 1
                             })
                           ]),
-                          createElementVNode("div", _hoisted_18$3, [
-                            createElementVNode("div", _hoisted_19$2, [
-                              createElementVNode("div", _hoisted_20$2, [
+                          createElementVNode("div", _hoisted_18$4, [
+                            createElementVNode("div", _hoisted_19$3, [
+                              createElementVNode("div", _hoisted_20$3, [
                                 createVNode(Key, { size: 24 })
                               ]),
                               _cache[18] || (_cache[18] = createElementVNode("div", { class: "mfa-device-option-info" }, [
@@ -11556,8 +11556,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                               _: 1
                             })
                           ]),
-                          createElementVNode("div", _hoisted_21$2, [
-                            createElementVNode("div", _hoisted_22$2, [
+                          createElementVNode("div", _hoisted_21$3, [
+                            createElementVNode("div", _hoisted_22$3, [
                               createElementVNode("div", _hoisted_23$2, [
                                 createVNode(Fingerprint, { size: 24 })
                               ]),
@@ -11984,19 +11984,19 @@ const _hoisted_12$3 = { class: "sessions-list" };
 const _hoisted_13$3 = { class: "session-header" };
 const _hoisted_14$3 = { class: "session-device-info" };
 const _hoisted_15$3 = { class: "session-device-name" };
-const _hoisted_16$2 = {
+const _hoisted_16$3 = {
   key: 0,
   class: "session-current-badge"
 };
-const _hoisted_17$2 = { class: "session-location" };
-const _hoisted_18$2 = {
+const _hoisted_17$3 = { class: "session-location" };
+const _hoisted_18$3 = {
   key: 0,
   class: "session-actions"
 };
-const _hoisted_19$1 = { class: "session-details" };
-const _hoisted_20$1 = { class: "detail-row" };
-const _hoisted_21$1 = { class: "detail-icon" };
-const _hoisted_22$1 = { class: "detail-text" };
+const _hoisted_19$2 = { class: "session-details" };
+const _hoisted_20$2 = { class: "detail-row" };
+const _hoisted_21$2 = { class: "detail-icon" };
+const _hoisted_22$2 = { class: "detail-text" };
 const _hoisted_23$1 = { class: "detail-row" };
 const _hoisted_24$1 = { class: "detail-icon" };
 const _hoisted_25$1 = { class: "detail-text" };
@@ -12264,14 +12264,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       createElementVNode("div", _hoisted_14$3, [
                         createElementVNode("h4", _hoisted_15$3, [
                           createTextVNode(toDisplayString(getDeviceName(session)) + " ", 1),
-                          session.is_current ? (openBlock(), createElementBlock("span", _hoisted_16$2, " Current ")) : createCommentVNode("", true)
+                          session.is_current ? (openBlock(), createElementBlock("span", _hoisted_16$3, " Current ")) : createCommentVNode("", true)
                         ]),
-                        createElementVNode("div", _hoisted_17$2, [
+                        createElementVNode("div", _hoisted_17$3, [
                           createVNode(MapPin, { size: 14 }),
                           createElementVNode("span", null, toDisplayString(getLocationString(session)), 1)
                         ])
                       ]),
-                      !session.is_current ? (openBlock(), createElementBlock("div", _hoisted_18$2, [
+                      !session.is_current ? (openBlock(), createElementBlock("div", _hoisted_18$3, [
                         createVNode(unref(CompoundUiButton), {
                           variant: "outline",
                           size: "xs",
@@ -12285,12 +12285,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         }, 1032, ["onClick", "disabled"])
                       ])) : createCommentVNode("", true)
                     ]),
-                    createElementVNode("div", _hoisted_19$1, [
-                      createElementVNode("div", _hoisted_20$1, [
-                        createElementVNode("span", _hoisted_21$1, [
+                    createElementVNode("div", _hoisted_19$2, [
+                      createElementVNode("div", _hoisted_20$2, [
+                        createElementVNode("span", _hoisted_21$2, [
                           createVNode(Monitor2, { size: 14 })
                         ]),
-                        createElementVNode("span", _hoisted_22$1, toDisplayString(session.user_agent || "Unknown device"), 1)
+                        createElementVNode("span", _hoisted_22$2, toDisplayString(session.user_agent || "Unknown device"), 1)
                       ]),
                       createElementVNode("div", _hoisted_23$1, [
                         createElementVNode("span", _hoisted_24$1, [
@@ -12366,19 +12366,19 @@ const _hoisted_12$2 = { class: "profile-section" };
 const _hoisted_13$2 = { class: "profile-setting-card" };
 const _hoisted_14$2 = { class: "profile-setting-header" };
 const _hoisted_15$2 = { class: "profile-setting-subtitle" };
-const _hoisted_16$1 = {
+const _hoisted_16$2 = {
   key: 0,
   class: "profile-change-form"
 };
-const _hoisted_17$1 = { class: "profile-field-section" };
-const _hoisted_18$1 = { class: "profile-field-header" };
-const _hoisted_19 = { class: "profile-field-subtitle" };
-const _hoisted_20 = {
+const _hoisted_17$2 = { class: "profile-field-section" };
+const _hoisted_18$2 = { class: "profile-field-header" };
+const _hoisted_19$1 = { class: "profile-field-subtitle" };
+const _hoisted_20$1 = {
   key: 0,
   class: "profile-change-form"
 };
-const _hoisted_21 = { class: "profile-password-section" };
-const _hoisted_22 = { class: "profile-field-section" };
+const _hoisted_21$1 = { class: "profile-password-section" };
+const _hoisted_22$1 = { class: "profile-field-section" };
 const _hoisted_23 = { class: "profile-field-header" };
 const _hoisted_24 = { class: "profile-field-subtitle" };
 const _hoisted_25 = {
@@ -13202,7 +13202,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         ]),
                         createVNode(Transition, { name: "expand" }, {
                           default: withCtx(() => [
-                            showEmailChange.value ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
+                            showEmailChange.value ? (openBlock(), createElementBlock("div", _hoisted_16$2, [
                               createVNode(unref(StrandsUiInput), {
                                 modelValue: emailChangeForm.newEmail,
                                 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emailChangeForm.newEmail = $event),
@@ -13235,11 +13235,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                           _: 1
                         })
                       ]),
-                      createElementVNode("div", _hoisted_17$1, [
-                        createElementVNode("div", _hoisted_18$1, [
+                      createElementVNode("div", _hoisted_17$2, [
+                        createElementVNode("div", _hoisted_18$2, [
                           createElementVNode("div", null, [
                             _cache[16] || (_cache[16] = createElementVNode("h4", { class: "profile-field-title" }, "Username", -1)),
-                            createElementVNode("p", _hoisted_19, toDisplayString(currentUser.value?.username || "No username set"), 1)
+                            createElementVNode("p", _hoisted_19$1, toDisplayString(currentUser.value?.username || "No username set"), 1)
                           ]),
                           createVNode(unref(CompoundUiButton), {
                             color: "secondary",
@@ -13255,7 +13255,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         ]),
                         createVNode(Transition, { name: "expand" }, {
                           default: withCtx(() => [
-                            showUsernameChange.value ? (openBlock(), createElementBlock("div", _hoisted_20, [
+                            showUsernameChange.value ? (openBlock(), createElementBlock("div", _hoisted_20$1, [
                               createVNode(unref(StrandsUiInput), {
                                 modelValue: usernameForm.username,
                                 "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => usernameForm.username = $event),
@@ -13285,9 +13285,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         })
                       ])
                     ]),
-                    createElementVNode("div", _hoisted_21, [
+                    createElementVNode("div", _hoisted_21$1, [
                       _cache[23] || (_cache[23] = createElementVNode("h3", { class: "profile-section-title" }, "Security Settings", -1)),
-                      createElementVNode("div", _hoisted_22, [
+                      createElementVNode("div", _hoisted_22$1, [
                         createElementVNode("div", _hoisted_23, [
                           createElementVNode("div", null, [
                             _cache[18] || (_cache[18] = createElementVNode("h4", { class: "profile-field-title" }, "Password", -1)),
@@ -13949,36 +13949,62 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$3 = {
   key: 0,
-  class: "user-info"
+  class: "mini-profile-avatar-wrapper"
 };
-const _hoisted_2$2 = { class: "user-name" };
-const _hoisted_3$2 = { class: "avatar-wrapper" };
-const _hoisted_4$2 = ["src", "alt"];
-const _hoisted_5$1 = {
+const _hoisted_2$2 = ["src", "alt", "width", "height"];
+const _hoisted_3$2 = {
+  key: 1,
+  class: "mini-profile-avatar-default"
+};
+const _hoisted_4$2 = {
+  key: 1,
+  class: "avatar-wrapper"
+};
+const _hoisted_5$1 = ["src", "alt", "width", "height"];
+const _hoisted_6$1 = {
   key: 1,
   class: "avatar-default"
 };
-const _hoisted_6$1 = ["onKeydown"];
-const _hoisted_7$1 = { class: "dropdown-content" };
-const _hoisted_8$1 = { class: "dropdown-header" };
-const _hoisted_9$1 = {
+const _hoisted_7$1 = {
+  key: 0,
+  class: "mini-profile-content"
+};
+const _hoisted_8$1 = { class: "mini-profile-name" };
+const _hoisted_9$1 = { class: "mini-profile-email" };
+const _hoisted_10$1 = {
+  key: 1,
+  class: "user-info"
+};
+const _hoisted_11$1 = { class: "user-name" };
+const _hoisted_12$1 = ["onKeydown"];
+const _hoisted_13$1 = { class: "dropdown-content" };
+const _hoisted_14$1 = {
+  key: 0,
+  class: "dropdown-header"
+};
+const _hoisted_15$1 = {
   key: 0,
   class: "dropdown-avatar-container"
 };
-const _hoisted_10$1 = ["src", "alt"];
-const _hoisted_11$1 = {
+const _hoisted_16$1 = ["src", "alt"];
+const _hoisted_17$1 = {
   key: 1,
   class: "dropdown-avatar-default"
 };
-const _hoisted_12$1 = { class: "dropdown-user-details" };
-const _hoisted_13$1 = { class: "dropdown-user-name" };
-const _hoisted_14$1 = { class: "dropdown-user-email" };
-const _hoisted_15$1 = { class: "sign-in-auth-wrapper" };
+const _hoisted_18$1 = { class: "dropdown-user-details" };
+const _hoisted_19 = { class: "dropdown-user-name" };
+const _hoisted_20 = { class: "dropdown-user-email" };
+const _hoisted_21 = {
+  key: 1,
+  class: "dropdown-divider"
+};
+const _hoisted_22 = { class: "sign-in-auth-wrapper" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "StrandsUserButton",
   props: {
     hideUser: { type: Boolean, default: false },
     variant: { default: "minimal" },
+    size: { default: "md" },
     redirectUrl: { default: "/" },
     user: { default: void 0 },
     menuAlign: { default: "right" },
@@ -14012,6 +14038,30 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         handler: () => closeDropdown()
       }
     });
+    const avatarSize = computed(() => {
+      switch (props.size) {
+        case "sm":
+          return 24;
+        case "md":
+          return 32;
+        case "lg":
+          return 40;
+        default:
+          return 32;
+      }
+    });
+    const avatarSizeWithProgress = computed(() => {
+      switch (props.size) {
+        case "sm":
+          return 48;
+        case "md":
+          return 64;
+        case "lg":
+          return 80;
+        default:
+          return 64;
+      }
+    });
     const user = computed(() => {
       if (props.user) return props.user;
       return isAuthenticated.value ? currentUser.value : null;
@@ -14118,7 +14168,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "fullscreen-on-mobile": false
             }, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_15$1, [
+                createElementVNode("div", _hoisted_22, [
                   createVNode(unref(StrandsAuth), {
                     onSignedIn: handleSignedIn,
                     onError: handleSignInError,
@@ -14142,6 +14192,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               ref: triggerRef,
               color: "secondary",
               active: showDropdown.value,
+              class: normalizeClass([`user-button-size-${_ctx.size}`, _ctx.variant === "mini-profile" && "user-button-mini-profile"]),
               onClick: toggleDropdown,
               onKeydown: [
                 withKeys(toggleDropdown, ["enter"]),
@@ -14154,16 +14205,47 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "aria-label": "User menu"
             }, {
               "leading-icon": withCtx(() => [
-                createElementVNode("div", _hoisted_3$2, [
+                _ctx.variant === "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+                  createVNode(unref(UiLevelProgress), {
+                    size: avatarSizeWithProgress.value,
+                    value: user.value?.xp || 0,
+                    max: user.value?.next_level_xp || 100,
+                    level: user.value?.level || 1,
+                    "level-label": `${user.value?.level || 1}`,
+                    "user-settings": user.value?.settings,
+                    class: "mini-profile-level-progress"
+                  }, null, 8, ["size", "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: "mini-profile-avatar-image",
+                    width: avatarSize.value,
+                    height: avatarSize.value,
+                    loading: "eager"
+                  }, null, 8, _hoisted_2$2)) : (openBlock(), createElementBlock("div", _hoisted_3$2, [..._cache[2] || (_cache[2] = [
+                    createElementVNode("svg", {
+                      class: "mini-profile-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("div", _hoisted_4$2, [
                   user.value?.avatar ? (openBlock(), createElementBlock("img", {
                     key: 0,
                     src: user.value.avatar,
-                    alt: `${user.value.firstName || user.value.email}'s avatar`,
+                    alt: `${user.value?.firstName || user.value?.email}'s avatar`,
                     class: "avatar-image",
-                    width: "32",
-                    height: "32",
+                    width: avatarSize.value,
+                    height: avatarSize.value,
                     loading: "eager"
-                  }, null, 8, _hoisted_4$2)) : (openBlock(), createElementBlock("div", _hoisted_5$1, [..._cache[2] || (_cache[2] = [
+                  }, null, 8, _hoisted_5$1)) : (openBlock(), createElementBlock("div", _hoisted_6$1, [..._cache[3] || (_cache[3] = [
                     createElementVNode("svg", {
                       class: "avatar-icon",
                       fill: "currentColor",
@@ -14176,7 +14258,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       })
                     ], -1)
                   ])]))
-                ])
+                ]))
               ]),
               "trailing-icon": withCtx(() => [
                 (openBlock(), createElementBlock("svg", {
@@ -14184,7 +14266,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24"
-                }, [..._cache[3] || (_cache[3] = [
+                }, [..._cache[4] || (_cache[4] = [
                   createElementVNode("path", {
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
@@ -14194,12 +14276,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ])], 2))
               ]),
               default: withCtx(() => [
-                !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-                  createElementVNode("div", _hoisted_2$2, toDisplayString(displayName.value), 1)
+                _ctx.variant === "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+                  createElementVNode("div", _hoisted_8$1, toDisplayString(displayName.value), 1),
+                  createElementVNode("div", _hoisted_9$1, toDisplayString(user.value?.email), 1)
+                ])) : !_ctx.hideUser ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
+                  createElementVNode("div", _hoisted_11$1, toDisplayString(displayName.value), 1)
                 ])) : createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["active", "onKeydown", "aria-expanded"]),
+            }, 8, ["active", "class", "onKeydown", "aria-expanded"]),
             (openBlock(), createBlock(Teleport, { to: "body" }, [
               showDropdown.value ? (openBlock(), createElementBlock("div", {
                 key: 0,
@@ -14217,9 +14302,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   withKeys(withModifiers(focusLast, ["prevent"]), ["end"])
                 ]
               }, [
-                createElementVNode("div", _hoisted_7$1, [
-                  createElementVNode("div", _hoisted_8$1, [
-                    user.value ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
+                createElementVNode("div", _hoisted_13$1, [
+                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
+                    user.value ? (openBlock(), createElementBlock("div", _hoisted_15$1, [
                       createVNode(unref(UiLevelProgress), {
                         size: 80,
                         value: user.value.xp,
@@ -14236,7 +14321,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         class: "dropdown-avatar-image",
                         width: "64",
                         height: "64"
-                      }, null, 8, _hoisted_10$1)) : (openBlock(), createElementBlock("div", _hoisted_11$1, [..._cache[4] || (_cache[4] = [
+                      }, null, 8, _hoisted_16$1)) : (openBlock(), createElementBlock("div", _hoisted_17$1, [..._cache[5] || (_cache[5] = [
                         createElementVNode("svg", {
                           class: "dropdown-avatar-icon",
                           fill: "currentColor",
@@ -14250,20 +14335,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         ], -1)
                       ])]))
                     ])) : createCommentVNode("", true),
-                    createElementVNode("div", _hoisted_12$1, [
-                      createElementVNode("div", _hoisted_13$1, toDisplayString(displayName.value), 1),
-                      createElementVNode("div", _hoisted_14$1, toDisplayString(user.value?.email), 1)
+                    createElementVNode("div", _hoisted_18$1, [
+                      createElementVNode("div", _hoisted_19, toDisplayString(displayName.value), 1),
+                      createElementVNode("div", _hoisted_20, toDisplayString(user.value?.email), 1)
                     ])
-                  ]),
+                  ])) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "default", {}, void 0, true),
-                  _cache[7] || (_cache[7] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
+                  _ctx.variant !== "mini-profile" ? (openBlock(), createElementBlock("div", _hoisted_21)) : createCommentVNode("", true),
                   createVNode(unref(StrandsNav), null, {
                     default: withCtx(() => [
                       createVNode(unref(StrandsNav).Item, {
                         color: "secondary",
                         onClick: openProfile
                       }, {
-                        default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                        default: withCtx(() => [..._cache[6] || (_cache[6] = [
                           createTextVNode("Profile", -1)
                         ])]),
                         _: 1
@@ -14272,7 +14357,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         color: "danger",
                         onClick: handleSignOut
                       }, {
-                        default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                        default: withCtx(() => [..._cache[7] || (_cache[7] = [
                           createTextVNode("Sign Out", -1)
                         ])]),
                         _: 1
@@ -14281,7 +14366,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ])
-              ], 44, _hoisted_6$1)) : createCommentVNode("", true)
+              ], 44, _hoisted_12$1)) : createCommentVNode("", true)
             ])),
             createVNode(unref(UiModal), {
               modelValue: showProfileModal.value,
@@ -14304,7 +14389,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a0ed0ab9"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-19537c80"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {