@strands.gg/accui 2.4.1 → 2.5.0

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

@@ -1,64 +1,14 @@
-import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, renderSlot, createBlock, Teleport, createCommentVNode, unref, createElementVNode, toDisplayString, createTextVNode, normalizeStyle, useSlots, createVNode, Fragment as Fragment$1, withCtx, resolveComponent, createSlots, h as h$1, ref, nextTick, withModifiers, renderList, watch, toRefs, withDirectives, vModelSelect, getCurrentInstance, watchEffect, onBeforeUnmount, shallowRef, markRaw, customRef, useCssVars, reactive, createStaticVNode, vModelText, Transition, mergeProps, inject, resolveDynamicComponent, withKeys, isMemoSame } from "vue";
+import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, renderSlot, Teleport, createCommentVNode, toDisplayString, createTextVNode, unref, normalizeStyle, useSlots, createVNode, Fragment as Fragment$1, withCtx, resolveComponent, createSlots, h as h$1, ref, nextTick, withModifiers, renderList, watch, toRefs, withDirectives, vModelSelect, getCurrentInstance, watchEffect, onBeforeUnmount, shallowRef, markRaw, customRef, useCssVars, reactive, createStaticVNode, vModelText, Transition, mergeProps, inject, resolveDynamicComponent, withKeys, isMemoSame } from "vue";
 import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-C3gBJK6y.es.js";
 import { s } from "./useStrandsConfig-C3gBJK6y.es.js";
 import { u as useStrandsAuth } from "./useStrandsAuth-DoUupKb8.es.js";
-class ModalStack {
-  stack = [];
-  escapeHandlerRegistered = false;
-  handleEscape = (e) => {
-    if (e.key === "Escape" && this.stack.length > 0) {
-      e.stopPropagation();
-      e.preventDefault();
-      const topModal = this.stack[this.stack.length - 1];
-      if (topModal && topModal.closeOnEscape) {
-        topModal.closeModal();
-      }
-    }
-  };
-  add(modal) {
-    this.stack.push(modal);
-    if (!this.escapeHandlerRegistered) {
-      document.addEventListener("keydown", this.handleEscape, true);
-      this.escapeHandlerRegistered = true;
-    }
-  }
-  remove(modalId) {
-    const index = this.stack.findIndex((modal) => modal.id === modalId);
-    if (index > -1) {
-      this.stack.splice(index, 1);
-    }
-    if (this.stack.length === 0 && this.escapeHandlerRegistered) {
-      document.removeEventListener("keydown", this.handleEscape, true);
-      this.escapeHandlerRegistered = false;
-    }
-  }
-  get length() {
-    return this.stack.length;
-  }
-  cleanup() {
-    if (this.escapeHandlerRegistered) {
-      document.removeEventListener("keydown", this.handleEscape, true);
-      this.escapeHandlerRegistered = false;
-    }
-    this.stack = [];
-  }
-}
-const modalStack = new ModalStack();
-if (typeof window !== "undefined") {
-  window.addEventListener("beforeunload", () => {
-    modalStack.cleanup();
-  });
-}
-const _hoisted_1$S = {
-  key: 0,
-  class: "ui-app-modal-overlay"
-};
+const _hoisted_1$S = { class: "app-content" };
 const _hoisted_2$J = {
   key: 0,
   class: "ui-app-loading-overlay"
 };
 const _hoisted_3$G = { class: "ui-app-loading-content" };
-const _hoisted_4$C = {
+const _hoisted_4$D = {
   key: 0,
   class: "ui-app-loading-message"
 };
@@ -77,7 +27,6 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         "ui-app--light": props.theme === "light",
         "ui-app--dark": props.theme === "dark",
         "ui-app--auto": props.theme === "auto",
-        "ui-app--has-modals": modalStack.length > 0,
         "ui-app--loading": isGlobalLoading.value
       };
     });
@@ -86,8 +35,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const computedTheme = computed(() => props.theme);
     provide("uiApp", {
       theme: computedTheme,
-      isLoading: isGlobalLoading,
-      modalCount: computed(() => modalStack.length)
+      isLoading: isGlobalLoading
     });
     provide("themeProvider", {
       theme: computedTheme,
@@ -109,10 +57,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-app", appClasses.value])
       }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          unref(modalStack).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$S)) : createCommentVNode("", true)
-        ])),
+        createElementVNode("div", _hoisted_1$S, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-app-notifications" }, null, -1))
         ])),
@@ -120,7 +67,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
           isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$J, [
             createElementVNode("div", _hoisted_3$G, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ui-app-loading-spinner" }, null, -1)),
-              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$C, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
+              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$D, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
             ])
           ])) : createCommentVNode("", true)
         ]))
@@ -135,11 +82,11 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-942fd7a0"]]);
+const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-f18c1706"]]);
 const _hoisted_1$R = { class: "accui-component-scope" };
 const _hoisted_2$I = { class: "alert-content" };
 const _hoisted_3$F = { class: "alert-icon-container" };
-const _hoisted_4$B = {
+const _hoisted_4$C = {
   class: "alert-main-icon",
   fill: "currentColor",
   viewBox: "0 0 20 20",
@@ -194,7 +141,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("div", _hoisted_2$I, [
             createElementVNode("div", _hoisted_3$F, [
-              (openBlock(), createElementBlock("svg", _hoisted_4$B, [
+              (openBlock(), createElementBlock("svg", _hoisted_4$C, [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: iconPath.value,
@@ -249,7 +196,7 @@ const _hoisted_1$Q = {
 };
 const _hoisted_2$H = ["width", "height"];
 const _hoisted_3$E = ["d"];
-const _hoisted_4$A = ["stroke-width"];
+const _hoisted_4$B = ["stroke-width"];
 const _hoisted_5$w = ["stroke-width"];
 const _hoisted_6$s = ["width", "height"];
 const _hoisted_7$r = {
@@ -297,7 +244,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, null, 8, _hoisted_4$A),
+            }, null, 8, _hoisted_4$B),
             createElementVNode("use", {
               href: "#logo-path",
               fill: "none",
@@ -356,7 +303,7 @@ const _hoisted_3$D = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_4$z = {
+const _hoisted_4$A = {
   key: 1,
   class: "trailing-icon"
 };
@@ -420,7 +367,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "icon", {}, void 0, true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$z, [
+          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$A, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 64))
@@ -813,7 +760,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-2d2b087d"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-ad63cbda"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
 CompoundUiButton.Anchor = _sfc_main$W;
@@ -859,7 +806,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-e189c5aa"]]);
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-2c11aaa2"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -1422,7 +1369,7 @@ const _hoisted_3$B = {
   key: 1,
   class: "input-trailing-icon"
 };
-const _hoisted_4$y = {
+const _hoisted_4$z = {
   key: 2,
   class: "input-trailing-icon"
 };
@@ -1550,7 +1497,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["color", "variant", "aria-label"])
-        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$y, [
+        ])) : _ctx.type === "search" && _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_4$z, [
           createVNode(StrandsUiButton, {
             color: "danger",
             variant: "ghost",
@@ -1888,7 +1835,7 @@ const _hoisted_1$J = {
 };
 const _hoisted_2$C = ["aria-expanded", "aria-controls"];
 const _hoisted_3$z = { class: "input-select-value" };
-const _hoisted_4$x = {
+const _hoisted_4$y = {
   key: 0,
   class: "input-select-text"
 };
@@ -1901,7 +1848,7 @@ const _hoisted_6$r = {
   class: "input-trailing-icon"
 };
 const _hoisted_7$q = ["id", "aria-multiselectable"];
-const _hoisted_8$p = {
+const _hoisted_8$o = {
   key: 0,
   class: "input-dropdown-search"
 };
@@ -2201,7 +2148,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             "aria-controls": dropdownId.value
           }, [
             createElementVNode("div", _hoisted_3$z, [
-              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$x, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
             ]),
             createElementVNode("div", {
               class: normalizeClass(["input-select-arrow", { "input-select-arrow-open": dropdownState.value.isOpen }])
@@ -2226,7 +2173,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
             }, ["prevent"]))
           }, [
-            _ctx.searchable ? (openBlock(), createElementBlock("div", _hoisted_8$p, [
+            _ctx.searchable ? (openBlock(), createElementBlock("div", _hoisted_8$o, [
               createVNode(StrandsUiInput, {
                 ref_key: "searchInputRef",
                 ref: searchInputRef,
@@ -2281,7 +2228,7 @@ const UiInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "d
 const _hoisted_1$I = { class: "input-leading-icon" };
 const _hoisted_2$B = ["src"];
 const _hoisted_3$y = ["id", "accept", "multiple", "disabled", "required"];
-const _hoisted_4$w = { class: "input-file-content" };
+const _hoisted_4$x = { class: "input-file-content" };
 const _hoisted_5$t = {
   key: 0,
   class: "input-file-prompt"
@@ -2291,7 +2238,7 @@ const _hoisted_7$p = {
   key: 0,
   class: "input-file-accept-text"
 };
-const _hoisted_8$o = {
+const _hoisted_8$n = {
   key: 1,
   class: "input-file-selected"
 };
@@ -2517,11 +2464,11 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onFocus: handleFocus
           }, null, 40, _hoisted_3$y),
-          createElementVNode("div", _hoisted_4$w, [
+          createElementVNode("div", _hoisted_4$x, [
             selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$t, [
               createElementVNode("div", _hoisted_6$q, toDisplayString(_ctx.dragDropText || "Click to select or drag and drop"), 1),
               _ctx.accept ? (openBlock(), createElementBlock("div", _hoisted_7$p, toDisplayString(_ctx.accept), 1)) : createCommentVNode("", true)
-            ])) : (openBlock(), createElementBlock("div", _hoisted_8$o, [
+            ])) : (openBlock(), createElementBlock("div", _hoisted_8$n, [
               createElementVNode("div", _hoisted_9$m, toDisplayString(_ctx.selectedText || `${selectedFiles.value.length} file(s) selected`), 1),
               createElementVNode("div", _hoisted_10$m, [
                 (openBlock(true), createElementBlock(Fragment$1, null, renderList(selectedFiles.value, (file, index) => {
@@ -2560,7 +2507,7 @@ const _hoisted_2$A = {
   class: "tabs-before"
 };
 const _hoisted_3$x = ["aria-selected", "id", "onClick"];
-const _hoisted_4$v = {
+const _hoisted_4$w = {
   key: 1,
   class: "tabs-after"
 };
@@ -2936,7 +2883,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(underlineStyle.value)
               }, null, 6)
             ], 2),
-            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$v, [
+            _ctx.$slots["after"] ? (openBlock(), createElementBlock("div", _hoisted_4$w, [
               renderSlot(_ctx.$slots, "after", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ], 6)
@@ -3026,7 +2973,7 @@ const UiDivider = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-
 const _hoisted_1$F = { class: "datetime-picker-wrapper" };
 const _hoisted_2$z = { class: "datetime-picker-leading-icon" };
 const _hoisted_3$w = { class: "datetime-picker-display" };
-const _hoisted_4$u = {
+const _hoisted_4$v = {
   key: 0,
   class: "datetime-picker-value"
 };
@@ -3042,7 +2989,7 @@ const _hoisted_7$o = {
   key: 1,
   class: "datetime-picker-panel"
 };
-const _hoisted_8$n = { class: "datetime-picker-header" };
+const _hoisted_8$m = { class: "datetime-picker-header" };
 const _hoisted_9$l = { class: "datetime-picker-month-year" };
 const _hoisted_10$l = ["value"];
 const _hoisted_11$l = ["value"];
@@ -3057,12 +3004,12 @@ const _hoisted_16$g = { class: "time-column" };
 const _hoisted_17$f = { class: "time-scroll" };
 const _hoisted_18$e = { class: "time-column" };
 const _hoisted_19$d = { class: "time-scroll" };
-const _hoisted_20$c = {
+const _hoisted_20$b = {
   key: 0,
   class: "time-column"
 };
 const _hoisted_21$b = { class: "time-scroll" };
-const _hoisted_22$a = { class: "datetime-picker-footer" };
+const _hoisted_22$9 = { class: "datetime-picker-footer" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "UiDateTimePicker",
   props: {
@@ -3409,7 +3356,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             _ctx.type === "date" ? (openBlock(), createBlock(unref(Calendar), { key: 0 })) : _ctx.type === "time" ? (openBlock(), createBlock(unref(Clock), { key: 1 })) : (openBlock(), createBlock(unref(CalendarClock), { key: 2 }))
           ]),
           createElementVNode("div", _hoisted_3$w, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$u, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$r, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$v, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$r, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -3451,7 +3398,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               style: { "margin-bottom": "1rem" }
             }, null, 8, ["modelValue", "tabs"])) : createCommentVNode("", true),
             showDatePanel.value ? (openBlock(), createElementBlock("div", _hoisted_7$o, [
-              createElementVNode("div", _hoisted_8$n, [
+              createElementVNode("div", _hoisted_8$m, [
                 createVNode(StrandsUiButton, {
                   onClick: previousMonth,
                   disabled: isPrevDisabled.value,
@@ -3583,7 +3530,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                     }), 128))
                   ])
                 ]),
-                !_ctx.is24Hour ? (openBlock(), createElementBlock("div", _hoisted_20$c, [
+                !_ctx.is24Hour ? (openBlock(), createElementBlock("div", _hoisted_20$b, [
                   _cache[10] || (_cache[10] = createElementVNode("label", { class: "time-label" }, "Period", -1)),
                   createElementVNode("div", _hoisted_21$b, [
                     createVNode(StrandsUiButton, {
@@ -3617,7 +3564,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               ])
             ])) : createCommentVNode("", true),
             createVNode(UiDivider),
-            createElementVNode("div", _hoisted_22$a, [
+            createElementVNode("div", _hoisted_22$9, [
               createVNode(StrandsUiButton, {
                 onClick: selectNow,
                 color: "primary",
@@ -24751,7 +24698,7 @@ var index_default = Placeholder;
 const _hoisted_1$E = { class: "input-richtext-toolbar" };
 const _hoisted_2$y = { class: "input-richtext-group" };
 const _hoisted_3$v = { class: "input-richtext-group" };
-const _hoisted_4$t = { class: "input-richtext-group" };
+const _hoisted_4$u = { class: "input-richtext-group" };
 const _hoisted_5$q = { class: "input-richtext-group" };
 const _hoisted_6$o = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
@@ -24948,7 +24895,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_4$t, [
+          createElementVNode("div", _hoisted_4$u, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive({ textAlign: "left" }) ? "primary" : "secondary",
               size: "sm",
@@ -25123,7 +25070,7 @@ const _hoisted_3$u = {
   key: 0,
   class: "input-required"
 };
-const _hoisted_4$s = {
+const _hoisted_4$t = {
   key: 9,
   class: "input-error-text"
 };
@@ -25180,9 +25127,6 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       const inputType = props.type || "text";
       return textTypes.includes(inputType);
     });
-    const hasError = computed(() => {
-      return Boolean(props.error);
-    });
     const handleInput = (value) => {
       emit("update:modelValue", value);
     };
@@ -25222,7 +25166,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           autocomplete: props.autocomplete,
           spellcheck: props.spellcheck,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: Boolean(props.error && props.error !== true && props.error !== ""),
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
@@ -25257,7 +25201,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           spellcheck: props.spellcheck,
           resizable: props.resizable,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
@@ -25290,7 +25234,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           "no-options-text": props.noOptionsText,
           "search-placeholder": props.searchPlaceholder,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
@@ -25321,7 +25265,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled,
           required: props.required,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onFileError: handleFileError,
@@ -25352,7 +25296,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           min: props.min,
           max: props.max,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
@@ -25365,7 +25309,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           readonly: _ctx.readonly,
           required: props.required,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
@@ -25380,7 +25324,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           min: props.min,
           max: props.max,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           size: props.size,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
@@ -25392,19 +25336,19 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled,
           readonly: _ctx.readonly,
           "input-id": inputId.value,
-          error: hasError.value,
+          error: props.error,
           "min-height": props.minHeight,
           "max-height": props.maxHeight,
           "onUpdate:modelValue": handleInput,
           onBlur: handleBlur,
           onFocus: handleFocus
         }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "input-id", "error", "min-height", "max-height"])) : createCommentVNode("", true),
-        props.error ? (openBlock(), createElementBlock("p", _hoisted_4$s, toDisplayString(typeof props.error === "string" ? props.error : props.error instanceof Error ? props.error.message : String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$p, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
+        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$t, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$p, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-88a9ffad"]]);
+const StrandsUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-10a4eb0c"]]);
 const _hoisted_1$C = ["disabled", "aria-disabled"];
 const _hoisted_2$w = ["href", "target", "rel", "aria-disabled"];
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
@@ -25570,11 +25514,11 @@ const _hoisted_3$t = {
   key: 1,
   class: "editor-container"
 };
-const _hoisted_4$r = { class: "editor-main" };
+const _hoisted_4$s = { class: "editor-main" };
 const _hoisted_5$o = { class: "canvas-container" };
 const _hoisted_6$n = ["width", "height"];
 const _hoisted_7$m = { class: "crop-overlay" };
-const _hoisted_8$m = { class: "crop-backdrop" };
+const _hoisted_8$l = { class: "crop-backdrop" };
 const _hoisted_9$k = { class: "crop-svg" };
 const _hoisted_10$k = { id: "backdrop-mask" };
 const _hoisted_11$k = ["width", "height"];
@@ -25586,9 +25530,9 @@ const _hoisted_16$f = { class: "controls" };
 const _hoisted_17$e = { class: "zoom-control" };
 const _hoisted_18$d = ["min", "max"];
 const _hoisted_19$c = { class: "action-buttons" };
-const _hoisted_20$b = { class: "preview-section" };
+const _hoisted_20$a = { class: "preview-section" };
 const _hoisted_21$a = { class: "preview-container" };
-const _hoisted_22$9 = ["width", "height"];
+const _hoisted_22$8 = ["width", "height"];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "UiAvatarEditor",
   props: {
@@ -25902,7 +25846,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           }, [..._cache[6] || (_cache[6] = [
             createStaticVNode('<div class="upload-content"><svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><h3 class="upload-title">Upload your photo</h3><p class="upload-subtitle">Drag and drop or click to browse</p><div class="upload-formats"><span class="format-tag">JPG</span><span class="format-tag">PNG</span><span class="format-tag">GIF</span></div></div>', 1)
           ])], 32)) : (openBlock(), createElementBlock("div", _hoisted_3$t, [
-            createElementVNode("div", _hoisted_4$r, [
+            createElementVNode("div", _hoisted_4$s, [
               createElementVNode("div", _hoisted_5$o, [
                 createElementVNode("canvas", {
                   ref_key: "canvas",
@@ -25914,7 +25858,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   onWheel: handleWheel
                 }, null, 40, _hoisted_6$n),
                 createElementVNode("div", _hoisted_7$m, [
-                  createElementVNode("div", _hoisted_8$m, [
+                  createElementVNode("div", _hoisted_8$l, [
                     (openBlock(), createElementBlock("svg", _hoisted_9$k, [
                       createElementVNode("defs", null, [
                         createElementVNode("mask", _hoisted_10$k, [
@@ -26049,7 +25993,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 ])
               ])
             ]),
-            createElementVNode("div", _hoisted_20$b, [
+            createElementVNode("div", _hoisted_20$a, [
               _cache[9] || (_cache[9] = createElementVNode("h3", { class: "preview-title" }, "Preview", -1)),
               createElementVNode("div", _hoisted_21$a, [
                 createElementVNode("canvas", {
@@ -26058,7 +26002,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   width: previewSize.value,
                   height: previewSize.value,
                   class: "preview-canvas"
-                }, null, 8, _hoisted_22$9)
+                }, null, 8, _hoisted_22$8)
               ]),
               _cache[10] || (_cache[10] = createElementVNode("p", { class: "preview-instructions" }, [
                 createTextVNode(" Drag image to reposition"),
@@ -26371,11 +26315,11 @@ const playLevelUp = (level, userSettings) => SoundEffects.playLevelUp(level, use
 const _hoisted_1$z = { class: "level-progress-container" };
 const _hoisted_2$u = ["width", "height", "viewBox"];
 const _hoisted_3$s = { key: 0 };
-const _hoisted_4$q = ["r"];
+const _hoisted_4$r = ["r"];
 const _hoisted_5$n = ["y"];
 const _hoisted_6$m = ["d", "stroke-width"];
 const _hoisted_7$l = ["d", "stroke", "stroke-width"];
-const _hoisted_8$l = ["d"];
+const _hoisted_8$k = ["d"];
 const _hoisted_9$j = ["d", "stroke", "stroke-width"];
 const _hoisted_10$j = {
   "font-size": "30",
@@ -26567,7 +26511,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               r: innerCircleRadius.value,
               fill: "#a800ff",
               opacity: "0.92"
-            }, null, 8, _hoisted_4$q),
+            }, null, 8, _hoisted_4$r),
             createElementVNode("text", {
               x: center,
               y: center + 15,
@@ -26599,7 +26543,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             stroke: "transparent",
             fill: "none",
             transform: "scale(-1, 1) translate(-400, 0)"
-          }, null, 8, _hoisted_8$l),
+          }, null, 8, _hoisted_8$k),
           animatedValue.value > 0 ? (openBlock(), createElementBlock("path", {
             key: 2,
             d: progressArcPath.value,
@@ -26652,9 +26596,211 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 const UiLevelProgress = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-410a88ab"]]);
-const _hoisted_1$y = { class: "ui-modal-header-content" };
-const _hoisted_2$t = { class: "ui-modal-title" };
-const _hoisted_3$r = { key: 0 };
+class ModalStack {
+  stack = [];
+  escapeHandlerRegistered = false;
+  baseZIndex = 2147483647;
+  subscribers = /* @__PURE__ */ new Set();
+  handleEscape = (e) => {
+    if (e.key === "Escape" && this.stack.length > 0) {
+      e.stopPropagation();
+      e.preventDefault();
+      const topModal = this.stack[this.stack.length - 1];
+      if (topModal && topModal.closeOnEscape) {
+        topModal.closeModal();
+      }
+    }
+  };
+  calculateZIndex(priority = "normal") {
+    const priorityMultipliers = {
+      low: 0,
+      normal: 100,
+      high: 200,
+      critical: 300
+    };
+    const baseForPriority = this.baseZIndex + priorityMultipliers[priority];
+    const stackDepth = this.stack.length;
+    return baseForPriority + stackDepth;
+  }
+  notifySubscribers() {
+    const state = {
+      modals: [...this.stack],
+      topModal: this.stack[this.stack.length - 1] || null,
+      hasModals: this.stack.length > 0,
+      highestZIndex: this.stack.length > 0 ? Math.max(...this.stack.map((m) => m.zIndex)) : 0
+    };
+    this.subscribers.forEach((callback) => callback(state));
+  }
+  add(modal) {
+    const modalWithZIndex = {
+      ...modal,
+      zIndex: this.calculateZIndex(modal.priority)
+    };
+    this.stack.push(modalWithZIndex);
+    if (!this.escapeHandlerRegistered) {
+      document.addEventListener("keydown", this.handleEscape, true);
+      this.escapeHandlerRegistered = true;
+    }
+    this.notifySubscribers();
+    return modalWithZIndex;
+  }
+  remove(modalId) {
+    const index = this.stack.findIndex((modal) => modal.id === modalId);
+    if (index > -1) {
+      this.stack.splice(index, 1);
+    }
+    if (this.stack.length === 0 && this.escapeHandlerRegistered) {
+      document.removeEventListener("keydown", this.handleEscape, true);
+      this.escapeHandlerRegistered = false;
+    }
+    this.notifySubscribers();
+  }
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    callback({
+      modals: [...this.stack],
+      topModal: this.stack[this.stack.length - 1] || null,
+      hasModals: this.stack.length > 0,
+      highestZIndex: this.stack.length > 0 ? Math.max(...this.stack.map((m) => m.zIndex)) : 0
+    });
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+  get length() {
+    return this.stack.length;
+  }
+  get state() {
+    return {
+      modals: [...this.stack],
+      topModal: this.stack[this.stack.length - 1] || null,
+      hasModals: this.stack.length > 0,
+      highestZIndex: this.stack.length > 0 ? Math.max(...this.stack.map((m) => m.zIndex)) : 0
+    };
+  }
+  cleanup() {
+    if (this.escapeHandlerRegistered) {
+      document.removeEventListener("keydown", this.handleEscape, true);
+      this.escapeHandlerRegistered = false;
+    }
+    this.stack = [];
+    this.subscribers.clear();
+  }
+}
+const modalStack = new ModalStack();
+if (typeof window !== "undefined") {
+  window.addEventListener("beforeunload", () => {
+    modalStack.cleanup();
+  });
+}
+function useModalStack(options = {}) {
+  const {
+    closeOnEscape = true,
+    priority = "normal",
+    component
+  } = options;
+  const modalId = ref(null);
+  const isOpen = ref(false);
+  const modalInstance = ref(null);
+  const openModal = async (customCloseHandler) => {
+    if (isOpen.value) return;
+    const id = Symbol("modal");
+    modalId.value = id;
+    const instance = modalStack.add({
+      id,
+      closeModal: customCloseHandler || closeModal,
+      closeOnEscape,
+      priority,
+      component
+    });
+    modalInstance.value = instance;
+    isOpen.value = true;
+    await nextTick();
+    return instance;
+  };
+  const closeModal = () => {
+    if (!modalId.value || !isOpen.value) return;
+    modalStack.remove(modalId.value);
+    modalId.value = null;
+    modalInstance.value = null;
+    isOpen.value = false;
+  };
+  const getModalContainer = () => {
+    if (!modalId.value) return null;
+    return document.querySelector(`[data-modal-id="${modalId.value.toString()}"]`);
+  };
+  const getModalBackdrop = () => {
+    if (!modalInstance.value) return null;
+    return document.querySelector(`.ui-app-modal-backdrop[style*="z-index: ${modalInstance.value.zIndex - 1}"]`);
+  };
+  onUnmounted(() => {
+    if (isOpen.value) {
+      closeModal();
+    }
+  });
+  return {
+    // State
+    isOpen,
+    modalId,
+    modalInstance,
+    // Actions
+    openModal,
+    closeModal,
+    // Utilities
+    getModalContainer,
+    getModalBackdrop,
+    // Computed values
+    zIndex: () => modalInstance.value?.zIndex || 0,
+    isTopModal: () => {
+      const state = modalStack.state;
+      return modalInstance.value === state.topModal;
+    }
+  };
+}
+function useModalTeleport(modalId) {
+  const getTarget = () => {
+    return `[data-modal-id="${modalId.toString()}"]`;
+  };
+  const isTargetAvailable = () => {
+    return document.querySelector(getTarget()) !== null;
+  };
+  return {
+    target: getTarget(),
+    isAvailable: isTargetAvailable
+  };
+}
+function useGlobalModalStack() {
+  const stackState = ref(modalStack.state);
+  const unsubscribe = modalStack.subscribe((state) => {
+    stackState.value = state;
+  });
+  onUnmounted(unsubscribe);
+  return {
+    state: stackState,
+    closeAll: () => {
+      const modals = [...stackState.value.modals].reverse();
+      modals.forEach((modal) => modal.closeModal());
+    },
+    closeTop: () => {
+      const topModal = stackState.value.topModal;
+      if (topModal) {
+        topModal.closeModal();
+      }
+    },
+    getModalByComponent: (componentName) => {
+      return stackState.value.modals.find((modal) => modal.component === componentName);
+    }
+  };
+}
+const _hoisted_1$y = {
+  key: 0,
+  class: "ui-modal-backdrop",
+  role: "dialog",
+  "aria-modal": "true"
+};
+const _hoisted_2$t = { class: "ui-modal-header-content" };
+const _hoisted_3$r = { class: "ui-modal-title" };
+const _hoisted_4$q = { key: 0 };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "UiModal",
   props: {
@@ -26662,7 +26808,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     closeOnBackdrop: { type: Boolean, default: true },
     closeOnEscape: { type: Boolean, default: true },
     showCloseButton: { type: Boolean, default: true },
-    size: { default: "md" },
+    size: { default: "auto" },
     cardVariant: { default: "modern" },
     cardPadding: { default: "lg" },
     cardShadow: { default: "lg" },
@@ -26676,10 +26822,15 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const internalOpen = ref(false);
-    const modalId = Symbol();
     const triggerElement = ref(null);
     const modalContainer = ref(null);
     const previousFocusElement = ref(null);
+    const modal = useModalStack({
+      closeOnEscape: props.closeOnEscape,
+      priority: "normal",
+      component: "UiModal"
+    });
+    ref(true);
     const isModalOpen = computed(() => {
       return props.modelValue !== void 0 ? props.modelValue : internalOpen.value;
     });
@@ -26698,8 +26849,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       };
       return sizeMap[props.size];
     });
-    const openModal = () => {
+    const openModal = async () => {
       previousFocusElement.value = document.activeElement;
+      await modal.openModal(closeModal);
       if (props.modelValue !== void 0) {
         emit("update:modelValue", true);
       } else {
@@ -26717,6 +26869,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       openModal();
     };
     const closeModal = () => {
+      modal.closeModal();
       if (props.modelValue !== void 0) {
         emit("update:modelValue", false);
       } else {
@@ -26730,26 +26883,25 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         previousFocusElement.value = null;
       });
     };
-    const handleBackdropClick = () => {
-      if (props.closeOnBackdrop) {
-        closeModal();
-      }
-    };
     watch(isModalOpen, async (newVal) => {
       if (newVal) {
-        modalStack.add({
-          id: modalId,
-          closeModal,
-          closeOnEscape: props.closeOnEscape
-        });
-        document.body.style.overflow = "hidden";
+        if (!modal.isOpen.value) {
+          await modal.openModal(closeModal);
+        }
+        const openModals = document.querySelectorAll('[role="dialog"][aria-modal="true"]');
+        if (openModals.length <= 1) {
+          document.body.style.overflow = "hidden";
+        }
         await nextTick();
         if (modalContainer.value) {
           modalContainer.value.focus();
         }
       } else {
-        modalStack.remove(modalId);
-        if (modalStack.length === 0) {
+        if (modal.isOpen.value) {
+          modal.closeModal();
+        }
+        const openModals = document.querySelectorAll('[role="dialog"][aria-modal="true"]');
+        if (openModals.length === 0) {
           document.body.style.overflow = "";
         }
       }
@@ -26780,10 +26932,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     });
     onUnmounted(() => {
       document.removeEventListener("keydown", handleTabKey);
-      modalStack.remove(modalId);
-      if (modalStack.length === 0) {
-        document.body.style.overflow = "";
-      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment$1, null, [
@@ -26799,22 +26947,17 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             isOpen: isModalOpen.value
           }, void 0, true)
         ], 512)) : createCommentVNode("", true),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
+        isModalOpen.value ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body"
+        }, [
           createVNode(Transition, { name: "modal" }, {
             default: withCtx(() => [
-              isModalOpen.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "ui-modal-backdrop",
-                onClick: handleBackdropClick,
-                role: "dialog",
-                "aria-modal": "true"
-              }, [
+              isModalOpen.value ? (openBlock(), createElementBlock("div", _hoisted_1$y, [
                 createElementVNode("div", {
                   class: "ui-modal-container",
                   ref_key: "modalContainer",
-                  ref: modalContainer,
-                  onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                  }, ["stop"]))
+                  ref: modalContainer
                 }, [
                   createVNode(StrandsUiCard, {
                     variant: _ctx.cardVariant,
@@ -26825,14 +26968,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                     tabindex: "-1"
                   }, createSlots({
                     header: withCtx(() => [
-                      createElementVNode("div", _hoisted_1$y, [
-                        createElementVNode("div", _hoisted_2$t, [
+                      createElementVNode("div", _hoisted_2$t, [
+                        createElementVNode("div", _hoisted_3$r, [
                           renderSlot(_ctx.$slots, "header", {
                             handleClose: closeModal,
                             isOpen: isModalOpen.value,
                             openModal
                           }, () => [
-                            _ctx.$props.title ? (openBlock(), createElementBlock("h2", _hoisted_3$r, toDisplayString(_ctx.$props.title), 1)) : createCommentVNode("", true)
+                            _ctx.$props.title ? (openBlock(), createElementBlock("h2", _hoisted_4$q, toDisplayString(_ctx.$props.title), 1)) : createCommentVNode("", true)
                           ], true)
                         ]),
                         _ctx.showCloseButton ? (openBlock(), createElementBlock("button", {
@@ -26841,7 +26984,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                           class: "ui-modal-close-button",
                           onClick: closeModal,
                           "aria-label": "Close modal"
-                        }, [..._cache[1] || (_cache[1] = [
+                        }, [..._cache[0] || (_cache[0] = [
                           createElementVNode("svg", {
                             width: "18",
                             height: "18",
@@ -26877,12 +27020,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           })
-        ]))
+        ])) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-29ec8a36"]]);
+const UiModal = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-dece6264"]]);
 const tailwindColors = {
   "#000000": {
     label: "Black"
@@ -27492,7 +27635,7 @@ const _hoisted_4$p = ["d"];
 const _hoisted_5$m = ["d"];
 const _hoisted_6$l = ["d"];
 const _hoisted_7$k = ["d"];
-const _hoisted_8$k = ["d"];
+const _hoisted_8$j = ["d"];
 const _hoisted_9$i = ["d"];
 const _hoisted_10$i = { class: "ui-color-picker-preview" };
 const _hoisted_11$i = {
@@ -27507,12 +27650,12 @@ const _hoisted_16$e = { class: "ui-color-picker-contrast-levels" };
 const _hoisted_17$d = { 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$a = {
+const _hoisted_20$9 = {
   viewBox: "0 0 280 40",
   class: "ui-color-picker-contrast-svg"
 };
 const _hoisted_21$9 = ["cx", "fill"];
-const _hoisted_22$8 = { class: "ui-color-picker-inputs" };
+const _hoisted_22$7 = { class: "ui-color-picker-inputs" };
 const _hoisted_23$7 = {
   key: 0,
   class: "ui-color-picker-input-row"
@@ -29224,7 +29367,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                   "stroke-linejoin": "round",
                   "stroke-opacity": "0.5",
                   "clip-path": "url(#canvasClip)"
-                }, null, 8, _hoisted_8$k)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_8$j)) : createCommentVNode("", true),
                 contrastBoundaryBottomCurve45.value ? (openBlock(), createElementBlock("path", {
                   key: 5,
                   d: contrastBoundaryBottomCurve45.value,
@@ -29336,7 +29479,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               ], 2)
             ]),
             createElementVNode("div", _hoisted_19$b, [
-              (openBlock(), createElementBlock("svg", _hoisted_20$a, [
+              (openBlock(), createElementBlock("svg", _hoisted_20$9, [
                 _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)),
@@ -29371,7 +29514,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({ left: `${alpha2.value * 100}%` })
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_22$8, [
+        createElementVNode("div", _hoisted_22$7, [
           currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$7, [
             createElementVNode("div", _hoisted_24$6, [
               _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
@@ -30093,7 +30236,7 @@ const _hoisted_7$j = {
   key: 1,
   class: "ui-table-sort-icon"
 };
-const _hoisted_8$j = { class: "ui-table-header-actions" };
+const _hoisted_8$i = { class: "ui-table-header-actions" };
 const _hoisted_9$h = ["onClick"];
 const _hoisted_10$h = ["onClick"];
 const _hoisted_11$h = {
@@ -30108,9 +30251,9 @@ const _hoisted_16$d = { class: "ui-table-body" };
 const _hoisted_17$c = { class: "ui-table-group-content" };
 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_20$8 = ["onClick"];
 const _hoisted_21$8 = ["onClick"];
-const _hoisted_22$7 = { class: "ui-table-subrow-content" };
+const _hoisted_22$6 = { class: "ui-table-subrow-content" };
 const _hoisted_23$6 = { class: "ui-table-subrow-default" };
 const _hoisted_24$5 = {
   key: 0,
@@ -30441,7 +30584,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                       }))
                     ])) : createCommentVNode("", true)
                   ], 8, _hoisted_5$l),
-                  createElementVNode("div", _hoisted_8$j, [
+                  createElementVNode("div", _hoisted_8$i, [
                     _ctx.filterable || column.filterable ? (openBlock(), createElementBlock("button", {
                       key: 0,
                       onClick: ($event) => toggleFilter(column.key),
@@ -30550,13 +30693,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                       ], true)
                     ], 14, _hoisted_21$8);
                   }), 128))
-                ], 10, _hoisted_20$9)),
+                ], 10, _hoisted_20$8)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
                   style: normalizeStyle(subrowStyle.value)
                 }, [
-                  createElementVNode("div", _hoisted_22$7, [
+                  createElementVNode("div", _hoisted_22$6, [
                     renderSlot(_ctx.$slots, "expanded-row", {
                       row,
                       rowIndex
@@ -30630,7 +30773,7 @@ const _hoisted_7$i = {
   key: 0,
   class: "ui-hero-background"
 };
-const _hoisted_8$i = {
+const _hoisted_8$h = {
   key: 1,
   class: "ui-hero-background"
 };
@@ -30725,7 +30868,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           ]),
           _ctx.variant === "space" ? (openBlock(), createElementBlock("div", _hoisted_7$i, [..._cache[0] || (_cache[0] = [
             createStaticVNode('<div class="ui-hero-gradient" data-v-00e0d581></div><div class="ui-hero-pattern" data-v-00e0d581></div><div class="ui-hero-particles" data-v-00e0d581></div><div class="ui-hero-shooting-stars" data-v-00e0d581><div class="shooting-star-1" data-v-00e0d581></div><div class="shooting-star-2" data-v-00e0d581></div><div class="shooting-star-3" data-v-00e0d581></div><div class="shooting-star-4" data-v-00e0d581></div><div class="shooting-star-5" data-v-00e0d581></div><div class="shooting-star-6" data-v-00e0d581></div></div><div class="ui-hero-starfield" data-v-00e0d581></div>', 5)
-          ])])) : _ctx.variant === "gradient" ? (openBlock(), createElementBlock("div", _hoisted_8$i, [..._cache[1] || (_cache[1] = [
+          ])])) : _ctx.variant === "gradient" ? (openBlock(), createElementBlock("div", _hoisted_8$h, [..._cache[1] || (_cache[1] = [
             createElementVNode("div", { class: "ui-hero-simple-gradient" }, null, -1)
           ])])) : createCommentVNode("", true)
         ], 6)
@@ -31097,7 +31240,7 @@ const _hoisted_5$i = {
 };
 const _hoisted_6$h = { class: "slider-track-container" };
 const _hoisted_7$h = ["id", "value", "min", "max", "step", "disabled", "required"];
-const _hoisted_8$h = { class: "slider-track" };
+const _hoisted_8$g = { class: "slider-track" };
 const _hoisted_9$g = {
   key: 1,
   class: "slider-max-label"
@@ -31263,7 +31406,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               onTouchstart: handleMouseDown,
               onTouchend: handleMouseUp
             }, null, 40, _hoisted_7$h),
-            createElementVNode("div", _hoisted_8$h, [
+            createElementVNode("div", _hoisted_8$g, [
               createElementVNode("div", {
                 class: "slider-progress",
                 style: normalizeStyle({ width: progressPercentage.value + "%" })
@@ -31312,7 +31455,7 @@ const _hoisted_4$k = ["onClick"];
 const _hoisted_5$h = ["id", "name", "value", "checked", "disabled", "required"];
 const _hoisted_6$g = { class: "radio-content" };
 const _hoisted_7$g = ["for"];
-const _hoisted_8$g = {
+const _hoisted_8$f = {
   key: 0,
   class: "radio-description"
 };
@@ -31426,7 +31569,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   for: `${_ctx.fieldId}-${option.value}`,
                   class: "radio-label"
                 }, toDisplayString(option.label), 9, _hoisted_7$g),
-                option.description ? (openBlock(), createElementBlock("p", _hoisted_8$g, toDisplayString(option.description), 1)) : createCommentVNode("", true),
+                option.description ? (openBlock(), createElementBlock("p", _hoisted_8$f, toDisplayString(option.description), 1)) : createCommentVNode("", true),
                 option.icon && _ctx.variant === "card" ? (openBlock(), createElementBlock("div", _hoisted_9$f, [
                   (openBlock(), createBlock(resolveDynamicComponent(option.icon)))
                 ])) : createCommentVNode("", true)
@@ -31463,7 +31606,7 @@ const _hoisted_7$f = {
   viewBox: "0 0 20 20",
   fill: "currentColor"
 };
-const _hoisted_8$f = {
+const _hoisted_8$e = {
   key: 1,
   class: "checkbox-indeterminate",
   viewBox: "0 0 20 20",
@@ -31502,7 +31645,7 @@ const _hoisted_19$9 = {
   key: 3,
   class: "checkbox-help"
 };
-const _hoisted_20$8 = {
+const _hoisted_20$7 = {
   key: 0,
   class: "checkbox-error-text"
 };
@@ -31645,7 +31788,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                     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)
-                ])])) : isIndeterminate(option.value) ? (openBlock(), createElementBlock("svg", _hoisted_8$f, [..._cache[1] || (_cache[1] = [
+                ])])) : isIndeterminate(option.value) ? (openBlock(), createElementBlock("svg", _hoisted_8$e, [..._cache[1] || (_cache[1] = [
                   createElementVNode("path", {
                     "fill-rule": "evenodd",
                     d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z",
@@ -31704,7 +31847,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ], 2)
         ])) : createCommentVNode("", true),
         _ctx.helpText || _ctx.error ? (openBlock(), createElementBlock("div", _hoisted_19$9, [
-          _ctx.error ? (openBlock(), createElementBlock("p", _hoisted_20$8, toDisplayString(_ctx.error), 1)) : _ctx.helpText ? (openBlock(), createElementBlock("p", _hoisted_21$7, toDisplayString(_ctx.helpText), 1)) : createCommentVNode("", true)
+          _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)
         ])) : createCommentVNode("", true)
       ], 2);
     };
@@ -31987,7 +32130,7 @@ const _hoisted_6$e = {
   class: "mfa-methods-section"
 };
 const _hoisted_7$e = { class: "mfa-methods-grid" };
-const _hoisted_8$e = ["onClick"];
+const _hoisted_8$d = ["onClick"];
 const _hoisted_9$d = { class: "mfa-method-info" };
 const _hoisted_10$d = { class: "mfa-method-name" };
 const _hoisted_11$d = { class: "mfa-method-type" };
@@ -32011,9 +32154,9 @@ const _hoisted_18$9 = {
   class: "mfa-hardware-section"
 };
 const _hoisted_19$8 = { class: "mfa-hardware-prompt" };
-const _hoisted_20$7 = { class: "mfa-hardware-prompt-content" };
+const _hoisted_20$6 = { 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_22$5 = { class: "mfa-hardware-prompt-text" };
 const _hoisted_23$5 = { class: "mfa-hardware-prompt-title" };
 const _hoisted_24$4 = { class: "mfa-hardware-prompt-description" };
 const _hoisted_25$4 = { class: "mfa-backup-option" };
@@ -32484,7 +32627,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                         selectedMethod.value?.id === method.id ? (openBlock(), createElementBlock("div", _hoisted_12$d, [
                           createVNode(IconCheckCircle, { size: 20 })
                         ])) : createCommentVNode("", true)
-                      ], 10, _hoisted_8$e);
+                      ], 10, _hoisted_8$d);
                     }), 128))
                   ])
                 ])) : selectedMethod.value ? (openBlock(), createElementBlock("div", _hoisted_13$d, [
@@ -32515,14 +32658,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ])) : 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, [
+                    createElementVNode("div", _hoisted_20$6, [
                       createElementVNode("div", _hoisted_21$6, [
                         (openBlock(), createBlock(resolveDynamicComponent(selectedMethod.value.device_type === "passkey" ? IconShield : IconKeyRound), {
                           size: 24,
                           class: "mfa-hardware-icon-svg"
                         }))
                       ]),
-                      createElementVNode("div", _hoisted_22$6, [
+                      createElementVNode("div", _hoisted_22$5, [
                         createElementVNode("h4", _hoisted_23$5, 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)
                       ])
@@ -32976,7 +33119,7 @@ const _hoisted_4$g = {
 const _hoisted_5$e = { key: 1 };
 const _hoisted_6$d = { key: 2 };
 const _hoisted_7$d = { key: 3 };
-const _hoisted_8$d = {
+const _hoisted_8$c = {
   key: 0,
   class: "auth-tabs-container"
 };
@@ -33011,12 +33154,12 @@ const _hoisted_18$8 = {
   class: "auth-divider"
 };
 const _hoisted_19$7 = { class: "auth-divider-text" };
-const _hoisted_20$6 = {
+const _hoisted_20$5 = {
   key: 0,
   class: "auth-password-field"
 };
 const _hoisted_21$5 = { class: "auth-password-header" };
-const _hoisted_22$5 = {
+const _hoisted_22$4 = {
   key: 0,
   class: "auth-back-link-container"
 };
@@ -33325,7 +33468,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  !isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_8$d, [
+                  !isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_8$c, [
                     createVNode(unref(StrandsUiTabs), {
                       modelValue: currentMode.value,
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentMode.value = $event),
@@ -33443,7 +33586,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                     onAfterLeave
                   }, {
                     default: withCtx(() => [
-                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_20$6, [
+                      !isPasswordReset.value && !isSignUp.value ? (openBlock(), createElementBlock("div", _hoisted_20$5, [
                         createElementVNode("div", _hoisted_21$5, [
                           _cache[10] || (_cache[10] = createElementVNode("span", { class: "auth-password-label" }, "Password", -1)),
                           createVNode(unref(StrandsUiLink), {
@@ -33508,7 +33651,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 onAfterLeave
               }, {
                 default: withCtx(() => [
-                  isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_22$5, [
+                  isPasswordReset.value ? (openBlock(), createElementBlock("div", _hoisted_22$4, [
                     createVNode(unref(StrandsUiLink), {
                       onClick: _cache[4] || (_cache[4] = ($event) => currentMode.value = "signin"),
                       class: "auth-back-link"
@@ -33639,7 +33782,7 @@ const _hoisted_6$c = {
   class: "accui-space-y-3 accui-mb-6"
 };
 const _hoisted_7$c = { class: "accui-w-5 accui-h-5 accui-flex accui-items-center accui-justify-center" };
-const _hoisted_8$c = {
+const _hoisted_8$b = {
   key: 0,
   class: "accui-w-5 accui-h-5"
 };
@@ -33776,7 +33919,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   }, {
                     default: withCtx(() => [
                       createElementVNode("div", _hoisted_7$c, [
-                        provider.icon || provider.iconUrl ? (openBlock(), createElementBlock("div", _hoisted_8$c, [
+                        provider.icon || provider.iconUrl ? (openBlock(), createElementBlock("div", _hoisted_8$b, [
                           createElementVNode("img", {
                             src: provider.icon || provider.iconUrl,
                             alt: `${provider.displayName || provider.name} icon`,
@@ -33926,7 +34069,7 @@ const _hoisted_4$e = { class: "accui-auth-header" };
 const _hoisted_5$c = { class: "accui-auth-content" };
 const _hoisted_6$b = { class: "signup-success" };
 const _hoisted_7$b = { class: "signup-success-title" };
-const _hoisted_8$b = { class: "signup-success-message" };
+const _hoisted_8$a = { class: "signup-success-message" };
 const _hoisted_9$a = {
   key: 0,
   class: "signup-success-email"
@@ -33961,9 +34104,9 @@ const _hoisted_19$5 = {
   key: 3,
   class: "oauth-icon-fallback"
 };
-const _hoisted_20$5 = { class: "oauth-icon-fallback-text" };
+const _hoisted_20$4 = { class: "oauth-icon-fallback-text" };
 const _hoisted_21$4 = { class: "oauth-button-text" };
-const _hoisted_22$4 = {
+const _hoisted_22$3 = {
   key: 1,
   class: "divider-with-text"
 };
@@ -34109,7 +34252,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_6$b, [
                 _cache[4] || (_cache[4] = createElementVNode("div", { class: "signup-success-icon" }, "📧", -1)),
                 createElementVNode("h1", _hoisted_7$b, toDisplayString(successTitle.value), 1),
-                createElementVNode("p", _hoisted_8$b, toDisplayString(successMessage.value), 1),
+                createElementVNode("p", _hoisted_8$a, toDisplayString(successMessage.value), 1),
                 successEmail.value ? (openBlock(), createElementBlock("div", _hoisted_9$a, [
                   createElementVNode("strong", null, toDisplayString(successEmail.value), 1)
                 ])) : createCommentVNode("", true),
@@ -34181,7 +34324,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                         ])])) : provider.id === "github" ? (openBlock(), createElementBlock("svg", _hoisted_18$6, [..._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)
+                          createElementVNode("span", _hoisted_20$4, toDisplayString((provider.displayName || provider.name).charAt(0).toUpperCase()), 1)
                         ]))
                       ]),
                       createElementVNode("span", _hoisted_21$4, "Continue with " + toDisplayString(provider.displayName || provider.name), 1)
@@ -34190,7 +34333,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   }, 1032, ["disabled", "onClick"]);
                 }), 128))
               ])) : createCommentVNode("", true),
-              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$4, [..._cache[8] || (_cache[8] = [
+              unref(enabledProviders)?.length ? (openBlock(), createElementBlock("div", _hoisted_22$3, [..._cache[8] || (_cache[8] = [
                 createElementVNode("span", { class: "divider-text" }, "Or create account with email", -1)
               ])])) : createCommentVNode("", true),
               createElementVNode("form", {
@@ -34307,7 +34450,7 @@ const _hoisted_6$a = {
   class: "complete-signup-container"
 };
 const _hoisted_7$a = { class: "complete-signup-header" };
-const _hoisted_8$a = {
+const _hoisted_8$9 = {
   key: 0,
   class: "complete-signup-email-info"
 };
@@ -34507,7 +34650,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_7$a, [
                 _cache[17] || (_cache[17] = createElementVNode("h1", { class: "complete-signup-title" }, "Complete Your Registration", -1)),
                 _cache[18] || (_cache[18] = createElementVNode("p", { class: "complete-signup-subtitle" }, "Set up your account details to finish registration", -1)),
-                email.value ? (openBlock(), createElementBlock("div", _hoisted_8$a, [
+                email.value ? (openBlock(), createElementBlock("div", _hoisted_8$9, [
                   createElementVNode("p", _hoisted_9$9, [
                     _cache[16] || (_cache[16] = createTextVNode("Creating account for: ", -1)),
                     createElementVNode("span", _hoisted_10$9, toDisplayString(email.value), 1)
@@ -34632,47 +34775,46 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 const StrandsCompleteSignUp = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-c7f95c2d"]]);
-const _hoisted_1$f = { class: "accui-component-scope" };
-const _hoisted_2$d = {
+const _hoisted_1$f = {
   key: 0,
   class: "step-container"
 };
-const _hoisted_3$c = { class: "step-actions" };
-const _hoisted_4$c = {
+const _hoisted_2$d = { class: "step-actions" };
+const _hoisted_3$c = {
   key: 1,
   class: "step-container"
 };
-const _hoisted_5$a = { class: "qr-container" };
-const _hoisted_6$9 = {
+const _hoisted_4$c = { class: "qr-container" };
+const _hoisted_5$a = {
   key: 0,
   class: "qr-wrapper"
 };
-const _hoisted_7$9 = ["src"];
-const _hoisted_8$9 = {
+const _hoisted_6$9 = ["src"];
+const _hoisted_7$9 = {
   key: 1,
   class: "qr-loading"
 };
-const _hoisted_9$8 = { class: "manual-entry" };
-const _hoisted_10$8 = { class: "manual-code" };
-const _hoisted_11$8 = {
+const _hoisted_8$8 = { class: "manual-entry" };
+const _hoisted_9$8 = { class: "manual-code" };
+const _hoisted_10$8 = {
   key: 0,
   class: "bg-yellow-50 border border-yellow-200 rounded-lg p-4"
 };
-const _hoisted_12$8 = { class: "flex justify-end space-x-3 pt-4" };
-const _hoisted_13$8 = {
+const _hoisted_11$8 = { class: "flex justify-end space-x-3 pt-4" };
+const _hoisted_12$8 = {
   key: 2,
   class: "space-y-4"
 };
-const _hoisted_14$8 = { class: "totp-setup-step-actions" };
-const _hoisted_15$7 = {
+const _hoisted_13$8 = { class: "totp-setup-step-actions" };
+const _hoisted_14$8 = {
   key: 3,
   class: "totp-setup-step"
 };
-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_15$7 = { class: "totp-setup-backup-codes" };
+const _hoisted_16$7 = { class: "totp-setup-backup-grid-wrapper" };
+const _hoisted_17$6 = { class: "totp-setup-backup-grid" };
+const _hoisted_18$5 = { class: "totp-setup-backup-actions" };
+const _hoisted_19$4 = { class: "totp-setup-final-actions" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "StrandsTotpSetupModal",
   props: {
@@ -34767,252 +34909,249 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       emit("success");
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createVNode(UiModal, {
-          modelValue: showModal.value,
-          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showModal.value = $event),
-          title: "Setup Authenticator App",
-          "card-class": "modal-card"
-        }, {
-          default: withCtx(() => [
-            step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
-              _cache[8] || (_cache[8] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "step-title" }, "Name Your Device"),
-                createElementVNode("p", { class: "step-description" }, ' Give this authenticator a memorable name (e.g., "iPhone", "Work Phone") ')
-              ], -1)),
-              createVNode(unref(StrandsUiInput), {
-                modelValue: deviceName.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => deviceName.value = $event),
-                label: "Device Name",
-                placeholder: "My Authenticator",
-                error: deviceNameError.value,
+      return openBlock(), createBlock(UiModal, {
+        modelValue: showModal.value,
+        "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showModal.value = $event),
+        title: "Setup Authenticator App",
+        "card-class": "modal-card"
+      }, {
+        default: withCtx(() => [
+          step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+            _cache[8] || (_cache[8] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "step-title" }, "Name Your Device"),
+              createElementVNode("p", { class: "step-description" }, ' Give this authenticator a memorable name (e.g., "iPhone", "Work Phone") ')
+            ], -1)),
+            createVNode(unref(StrandsUiInput), {
+              modelValue: deviceName.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => deviceName.value = $event),
+              label: "Device Name",
+              placeholder: "My Authenticator",
+              error: deviceNameError.value,
+              disabled: unref(loading2)
+            }, null, 8, ["modelValue", "error", "disabled"]),
+            createElementVNode("div", _hoisted_2$d, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: closeModal,
                 disabled: unref(loading2)
-              }, null, 8, ["modelValue", "error", "disabled"]),
-              createElementVNode("div", _hoisted_3$c, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: closeModal,
-                  disabled: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
-                    createTextVNode(" Cancel ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: startSetup,
-                  disabled: !deviceName.value.trim() || unref(loading2),
-                  loading: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[7] || (_cache[7] = [
-                    createTextVNode(" Continue ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled", "loading"])
-              ])
-            ])) : createCommentVNode("", true),
-            step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
-              _cache[13] || (_cache[13] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "step-title" }, "Scan QR Code"),
-                createElementVNode("p", { class: "step-description" }, " Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.) ")
-              ], -1)),
-              createElementVNode("div", _hoisted_5$a, [
-                qrCodeDataUrl.value ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
-                  createElementVNode("img", {
-                    src: qrCodeDataUrl.value,
-                    alt: "TOTP QR Code",
-                    class: "qr-image",
-                    width: "200",
-                    height: "200"
-                  }, null, 8, _hoisted_7$9)
-                ])) : (openBlock(), createElementBlock("div", _hoisted_8$9, [
-                  createVNode(unref(StrandsUiLoader), { size: 24 })
-                ]))
-              ]),
-              createElementVNode("div", _hoisted_9$8, [
-                _cache[9] || (_cache[9] = createElementVNode("p", { class: "manual-label" }, " Can't scan? Enter this code manually: ", -1)),
-                createElementVNode("code", _hoisted_10$8, toDisplayString(totpSetupData.value?.secret || "..."), 1)
+              }, {
+                default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                  createTextVNode(" Cancel ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: startSetup,
+                disabled: !deviceName.value.trim() || unref(loading2),
+                loading: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[7] || (_cache[7] = [
+                  createTextVNode(" Continue ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_3$c, [
+            _cache[13] || (_cache[13] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "step-title" }, "Scan QR Code"),
+              createElementVNode("p", { class: "step-description" }, " Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.) ")
+            ], -1)),
+            createElementVNode("div", _hoisted_4$c, [
+              qrCodeDataUrl.value ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
+                createElementVNode("img", {
+                  src: qrCodeDataUrl.value,
+                  alt: "TOTP QR Code",
+                  class: "qr-image",
+                  width: "200",
+                  height: "200"
+                }, null, 8, _hoisted_6$9)
+              ])) : (openBlock(), createElementBlock("div", _hoisted_7$9, [
+                createVNode(unref(StrandsUiLoader), { size: 24 })
+              ]))
+            ]),
+            createElementVNode("div", _hoisted_8$8, [
+              _cache[9] || (_cache[9] = createElementVNode("p", { class: "manual-label" }, " Can't scan? Enter this code manually: ", -1)),
+              createElementVNode("code", _hoisted_9$8, toDisplayString(totpSetupData.value?.secret || "..."), 1)
+            ]),
+            totpSetupData.value?.backup_codes ? (openBlock(), createElementBlock("div", _hoisted_10$8, [..._cache[10] || (_cache[10] = [
+              createElementVNode("div", { class: "flex items-start space-x-2" }, [
+                createElementVNode("svg", {
+                  class: "w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  createElementVNode("path", {
+                    "fill-rule": "evenodd",
+                    d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                    "clip-rule": "evenodd"
+                  })
+                ]),
+                createElementVNode("div", null, [
+                  createElementVNode("p", { class: "text-sm font-medium text-yellow-800" }, "Save Your Backup Codes"),
+                  createElementVNode("p", { class: "text-sm text-yellow-700 mt-1" }, " After setup, you'll receive backup codes. Store them safely - they're your only way to recover access if you lose your device. ")
+                ])
+              ], -1)
+            ])])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_11$8, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
+                disabled: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[11] || (_cache[11] = [
+                  createTextVNode(" Back ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: _cache[2] || (_cache[2] = ($event) => step.value = 3),
+                disabled: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                  createTextVNode(" I've Added It ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_12$8, [
+            _cache[16] || (_cache[16] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "text-lg font-semibold text-gray-900 mb-2" }, "Verify Setup"),
+              createElementVNode("p", { class: "text-sm text-gray-600 mb-4" }, " Enter the 6-digit code from your authenticator app to complete setup ")
+            ], -1)),
+            createVNode(unref(StrandsUiInput), {
+              modelValue: verificationCode.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => verificationCode.value = $event),
+              label: "Verification Code",
+              placeholder: "123456",
+              maxlength: "6",
+              error: verificationError.value,
+              disabled: unref(loading2),
+              onInput: onVerificationCodeInput
+            }, null, 8, ["modelValue", "error", "disabled"]),
+            createElementVNode("div", _hoisted_13$8, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: _cache[4] || (_cache[4] = ($event) => step.value = 2),
+                disabled: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[14] || (_cache[14] = [
+                  createTextVNode(" Back ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: verifySetup,
+                disabled: verificationCode.value.length !== 6 || unref(loading2),
+                loading: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[15] || (_cache[15] = [
+                  createTextVNode(" Verify & Enable ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 4 ? (openBlock(), createElementBlock("div", _hoisted_14$8, [
+            _cache[20] || (_cache[20] = createElementVNode("div", { class: "totp-setup-success" }, [
+              createElementVNode("div", { class: "totp-setup-success-icon" }, [
+                createElementVNode("svg", {
+                  class: "totp-setup-check-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M5 13l4 4L19 7"
+                  })
+                ])
               ]),
-              totpSetupData.value?.backup_codes ? (openBlock(), createElementBlock("div", _hoisted_11$8, [..._cache[10] || (_cache[10] = [
-                createElementVNode("div", { class: "flex items-start space-x-2" }, [
-                  createElementVNode("svg", {
-                    class: "w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0",
-                    fill: "currentColor",
-                    viewBox: "0 0 20 20"
-                  }, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-                      "clip-rule": "evenodd"
-                    })
-                  ]),
-                  createElementVNode("div", null, [
-                    createElementVNode("p", { class: "text-sm font-medium text-yellow-800" }, "Save Your Backup Codes"),
-                    createElementVNode("p", { class: "text-sm text-yellow-700 mt-1" }, " After setup, you'll receive backup codes. Store them safely - they're your only way to recover access if you lose your device. ")
-                  ])
-                ], -1)
-              ])])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_12$8, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
-                  disabled: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[11] || (_cache[11] = [
-                    createTextVNode(" Back ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: _cache[2] || (_cache[2] = ($event) => step.value = 3),
-                  disabled: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[12] || (_cache[12] = [
-                    createTextVNode(" I've Added It ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"])
-              ])
-            ])) : createCommentVNode("", true),
-            step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_13$8, [
-              _cache[16] || (_cache[16] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "text-lg font-semibold text-gray-900 mb-2" }, "Verify Setup"),
-                createElementVNode("p", { class: "text-sm text-gray-600 mb-4" }, " Enter the 6-digit code from your authenticator app to complete setup ")
-              ], -1)),
-              createVNode(unref(StrandsUiInput), {
-                modelValue: verificationCode.value,
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => verificationCode.value = $event),
-                label: "Verification Code",
-                placeholder: "123456",
-                maxlength: "6",
-                error: verificationError.value,
-                disabled: unref(loading2),
-                onInput: onVerificationCodeInput
-              }, null, 8, ["modelValue", "error", "disabled"]),
-              createElementVNode("div", _hoisted_14$8, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: _cache[4] || (_cache[4] = ($event) => step.value = 2),
-                  disabled: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[14] || (_cache[14] = [
-                    createTextVNode(" Back ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: verifySetup,
-                  disabled: verificationCode.value.length !== 6 || unref(loading2),
-                  loading: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[15] || (_cache[15] = [
-                    createTextVNode(" Verify & Enable ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled", "loading"])
-              ])
-            ])) : createCommentVNode("", true),
-            step.value === 4 ? (openBlock(), createElementBlock("div", _hoisted_15$7, [
-              _cache[20] || (_cache[20] = createElementVNode("div", { class: "totp-setup-success" }, [
-                createElementVNode("div", { class: "totp-setup-success-icon" }, [
-                  createElementVNode("svg", {
-                    class: "totp-setup-check-icon",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24"
-                  }, [
-                    createElementVNode("path", {
-                      "stroke-linecap": "round",
-                      "stroke-linejoin": "round",
-                      "stroke-width": "2",
-                      d: "M5 13l4 4L19 7"
-                    })
-                  ])
+              createElementVNode("h3", { class: "totp-setup-step-title" }, "TOTP Setup Complete!"),
+              createElementVNode("p", { class: "totp-setup-success-description" }, " Your authenticator app is now active for two-factor authentication. ")
+            ], -1)),
+            createElementVNode("div", _hoisted_15$7, [
+              _cache[18] || (_cache[18] = createElementVNode("div", { class: "totp-setup-backup-header" }, [
+                createElementVNode("svg", {
+                  class: "totp-setup-backup-warning-icon",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  createElementVNode("path", {
+                    "fill-rule": "evenodd",
+                    d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                    "clip-rule": "evenodd"
+                  })
                 ]),
-                createElementVNode("h3", { class: "totp-setup-step-title" }, "TOTP Setup Complete!"),
-                createElementVNode("p", { class: "totp-setup-success-description" }, " Your authenticator app is now active for two-factor authentication. ")
+                createElementVNode("div", null, [
+                  createElementVNode("p", { class: "totp-setup-backup-header-title" }, "Save These Backup Codes"),
+                  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$7, [
-                _cache[18] || (_cache[18] = createElementVNode("div", { class: "totp-setup-backup-header" }, [
-                  createElementVNode("svg", {
-                    class: "totp-setup-backup-warning-icon",
-                    fill: "currentColor",
-                    viewBox: "0 0 20 20"
-                  }, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-                      "clip-rule": "evenodd"
-                    })
-                  ]),
-                  createElementVNode("div", null, [
-                    createElementVNode("p", { class: "totp-setup-backup-header-title" }, "Save These Backup Codes"),
-                    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_17$6, [
-                  createElementVNode("div", _hoisted_18$5, [
-                    (openBlock(true), createElementBlock(Fragment$1, null, renderList(totpSetupData.value?.backup_codes, (code, index) => {
-                      return openBlock(), createElementBlock("div", {
-                        key: index,
-                        class: "totp-setup-backup-code"
-                      }, toDisplayString(code), 1);
-                    }), 128))
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_19$4, [
-                  createVNode(unref(CompoundUiButton), {
-                    variant: "secondary",
-                    size: "sm",
-                    onClick: copyBackupCodes
-                  }, {
-                    default: withCtx(() => [..._cache[17] || (_cache[17] = [
-                      createTextVNode(" 📋 Copy Codes ", -1)
-                    ])]),
-                    _: 1
-                  })
+                  (openBlock(true), createElementBlock(Fragment$1, null, renderList(totpSetupData.value?.backup_codes, (code, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: index,
+                      class: "totp-setup-backup-code"
+                    }, toDisplayString(code), 1);
+                  }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_20$4, [
+              createElementVNode("div", _hoisted_18$5, [
                 createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: finish
+                  variant: "secondary",
+                  size: "sm",
+                  onClick: copyBackupCodes
                 }, {
-                  default: withCtx(() => [..._cache[19] || (_cache[19] = [
-                    createTextVNode(" Done ", -1)
+                  default: withCtx(() => [..._cache[17] || (_cache[17] = [
+                    createTextVNode(" 📋 Copy Codes ", -1)
                   ])]),
                   _: 1
                 })
               ])
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["modelValue"])
-      ]);
+            ]),
+            createElementVNode("div", _hoisted_19$4, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: finish
+              }, {
+                default: withCtx(() => [..._cache[19] || (_cache[19] = [
+                  createTextVNode(" Done ", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
     };
   }
 });
-const StrandsTotpSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-9ba84ebb"]]);
-const _hoisted_1$e = { class: "accui-component-scope" };
-const _hoisted_2$c = {
+const StrandsTotpSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-85fffc4c"]]);
+const _hoisted_1$e = {
   key: 0,
   class: "email-mfa-setup-step"
 };
-const _hoisted_3$b = { class: "email-mfa-setup-step-actions" };
-const _hoisted_4$b = {
+const _hoisted_2$c = { class: "email-mfa-setup-step-actions" };
+const _hoisted_3$b = {
   key: 1,
   class: "email-mfa-setup-step"
 };
-const _hoisted_5$9 = { class: "email-mfa-setup-resend-section" };
-const _hoisted_6$8 = { class: "email-mfa-setup-step-actions" };
-const _hoisted_7$8 = {
+const _hoisted_4$b = { class: "email-mfa-setup-resend-section" };
+const _hoisted_5$9 = { class: "email-mfa-setup-step-actions" };
+const _hoisted_6$8 = {
   key: 2,
   class: "email-mfa-setup-step"
 };
-const _hoisted_8$8 = { class: "email-mfa-setup-final-actions" };
+const _hoisted_7$8 = { class: "email-mfa-setup-final-actions" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "StrandsEmailMfaSetupModal",
   props: {
@@ -35131,227 +35270,224 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       emit("success");
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(UiModal, {
-          modelValue: showModal.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showModal.value = $event),
-          title: "Setup Email 2FA",
-          "card-class": "email-mfa-setup-modal"
-        }, {
-          default: withCtx(() => [
-            step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
-              _cache[7] || (_cache[7] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Name Your Email 2FA"),
-                createElementVNode("p", { class: "email-mfa-setup-step-description" }, ' Give this email 2FA method a memorable name (e.g., "Personal Email", "Work Email") ')
-              ], -1)),
-              createVNode(unref(StrandsUiInput), {
-                modelValue: deviceName.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => deviceName.value = $event),
-                label: "Device Name",
-                placeholder: "Personal Email",
-                error: deviceNameError.value,
+      return openBlock(), createBlock(UiModal, {
+        modelValue: showModal.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showModal.value = $event),
+        title: "Setup Email 2FA",
+        "card-class": "email-mfa-setup-modal"
+      }, {
+        default: withCtx(() => [
+          step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+            _cache[7] || (_cache[7] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Name Your Email 2FA"),
+              createElementVNode("p", { class: "email-mfa-setup-step-description" }, ' Give this email 2FA method a memorable name (e.g., "Personal Email", "Work Email") ')
+            ], -1)),
+            createVNode(unref(StrandsUiInput), {
+              modelValue: deviceName.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => deviceName.value = $event),
+              label: "Device Name",
+              placeholder: "Personal Email",
+              error: deviceNameError.value,
+              disabled: unref(loading2)
+            }, null, 8, ["modelValue", "error", "disabled"]),
+            createVNode(unref(StrandsUiAlert), {
+              variant: "info",
+              title: "Email 2FA"
+            }, {
+              default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                createTextVNode(" Verification codes will be sent to your registered email address when logging in. ", -1)
+              ])]),
+              _: 1
+            }),
+            createElementVNode("div", _hoisted_2$c, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: closeModal,
                 disabled: unref(loading2)
-              }, null, 8, ["modelValue", "error", "disabled"]),
-              createVNode(unref(StrandsUiAlert), {
-                variant: "info",
-                title: "Email 2FA"
               }, {
-                default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                  createTextVNode(" Verification codes will be sent to your registered email address when logging in. ", -1)
+                default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  createTextVNode(" Cancel ", -1)
                 ])]),
                 _: 1
-              }),
-              createElementVNode("div", _hoisted_3$b, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: closeModal,
-                  disabled: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                    createTextVNode(" Cancel ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: startSetup,
-                  disabled: !deviceName.value.trim() || unref(loading2),
-                  loading: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[6] || (_cache[6] = [
-                    createTextVNode(" Setup Email 2FA ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled", "loading"])
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: startSetup,
+                disabled: !deviceName.value.trim() || unref(loading2),
+                loading: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                  createTextVNode(" Setup Email 2FA ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
+            _cache[10] || (_cache[10] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Test Email 2FA"),
+              createElementVNode("p", { class: "email-mfa-setup-step-description" }, " We've sent a test verification code to your email. Enter it below to complete setup. ")
+            ], -1)),
+            _cache[11] || (_cache[11] = createElementVNode("div", { class: "email-mfa-setup-success-notification" }, [
+              createElementVNode("div", { class: "email-mfa-setup-success-content" }, [
+                createElementVNode("svg", {
+                  class: "email-mfa-setup-success-icon",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  createElementVNode("path", {
+                    "fill-rule": "evenodd",
+                    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+                    "clip-rule": "evenodd"
+                  })
+                ]),
+                createElementVNode("div", null, [
+                  createElementVNode("p", { class: "email-mfa-setup-success-title" }, "Code Sent!"),
+                  createElementVNode("p", { class: "email-mfa-setup-success-description" }, " Check your email inbox for the verification code. ")
+                ])
               ])
-            ])) : createCommentVNode("", true),
-            step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
-              _cache[10] || (_cache[10] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Test Email 2FA"),
-                createElementVNode("p", { class: "email-mfa-setup-step-description" }, " We've sent a test verification code to your email. Enter it below to complete setup. ")
-              ], -1)),
-              _cache[11] || (_cache[11] = createElementVNode("div", { class: "email-mfa-setup-success-notification" }, [
-                createElementVNode("div", { class: "email-mfa-setup-success-content" }, [
-                  createElementVNode("svg", {
-                    class: "email-mfa-setup-success-icon",
-                    fill: "currentColor",
-                    viewBox: "0 0 20 20"
-                  }, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-                      "clip-rule": "evenodd"
-                    })
-                  ]),
-                  createElementVNode("div", null, [
-                    createElementVNode("p", { class: "email-mfa-setup-success-title" }, "Code Sent!"),
-                    createElementVNode("p", { class: "email-mfa-setup-success-description" }, " Check your email inbox for the verification code. ")
-                  ])
+            ], -1)),
+            createVNode(unref(StrandsUiInput), {
+              modelValue: verificationCode.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => verificationCode.value = $event),
+              label: "Verification Code",
+              placeholder: "123456",
+              maxlength: "6",
+              error: verificationError.value,
+              disabled: unref(loading2),
+              onInput: onVerificationCodeInput
+            }, null, 8, ["modelValue", "error", "disabled"]),
+            createElementVNode("div", _hoisted_4$b, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                size: "sm",
+                onClick: resendCode,
+                disabled: unref(loading2) || cooldownActive.value
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(cooldownActive.value ? `Resend in ${cooldownSeconds.value}s` : "Resend Code"), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            createElementVNode("div", _hoisted_5$9, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1),
+                disabled: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                  createTextVNode(" Back ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: verifySetup,
+                disabled: verificationCode.value.length !== 6 || unref(loading2),
+                loading: unref(loading2)
+              }, {
+                default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                  createTextVNode(" Verify & Enable ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
+            _cache[13] || (_cache[13] = createElementVNode("div", { class: "email-mfa-setup-completion" }, [
+              createElementVNode("div", { class: "email-mfa-setup-completion-icon" }, [
+                createElementVNode("svg", {
+                  class: "email-mfa-setup-check-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M5 13l4 4L19 7"
+                  })
                 ])
-              ], -1)),
-              createVNode(unref(StrandsUiInput), {
-                modelValue: verificationCode.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => verificationCode.value = $event),
-                label: "Verification Code",
-                placeholder: "123456",
-                maxlength: "6",
-                error: verificationError.value,
-                disabled: unref(loading2),
-                onInput: onVerificationCodeInput
-              }, null, 8, ["modelValue", "error", "disabled"]),
-              createElementVNode("div", _hoisted_5$9, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  size: "sm",
-                  onClick: resendCode,
-                  disabled: unref(loading2) || cooldownActive.value
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(cooldownActive.value ? `Resend in ${cooldownSeconds.value}s` : "Resend Code"), 1)
-                  ]),
-                  _: 1
-                }, 8, ["disabled"])
               ]),
-              createElementVNode("div", _hoisted_6$8, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1),
-                  disabled: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[8] || (_cache[8] = [
-                    createTextVNode(" Back ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: verifySetup,
-                  disabled: verificationCode.value.length !== 6 || unref(loading2),
-                  loading: unref(loading2)
-                }, {
-                  default: withCtx(() => [..._cache[9] || (_cache[9] = [
-                    createTextVNode(" Verify & Enable ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled", "loading"])
-              ])
-            ])) : createCommentVNode("", true),
-            step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_7$8, [
-              _cache[13] || (_cache[13] = createElementVNode("div", { class: "email-mfa-setup-completion" }, [
-                createElementVNode("div", { class: "email-mfa-setup-completion-icon" }, [
-                  createElementVNode("svg", {
-                    class: "email-mfa-setup-check-icon",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24"
-                  }, [
-                    createElementVNode("path", {
-                      "stroke-linecap": "round",
-                      "stroke-linejoin": "round",
-                      "stroke-width": "2",
-                      d: "M5 13l4 4L19 7"
-                    })
-                  ])
+              createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Email 2FA Setup Complete!"),
+              createElementVNode("p", { class: "email-mfa-setup-completion-description" }, " Email verification is now active for your account. You'll receive codes at your registered email address. ")
+            ], -1)),
+            _cache[14] || (_cache[14] = createElementVNode("div", { class: "email-mfa-setup-info" }, [
+              createElementVNode("div", { class: "email-mfa-setup-info-content" }, [
+                createElementVNode("svg", {
+                  class: "email-mfa-setup-info-icon",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  createElementVNode("path", {
+                    "fill-rule": "evenodd",
+                    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+                    "clip-rule": "evenodd"
+                  })
                 ]),
-                createElementVNode("h3", { class: "email-mfa-setup-step-title" }, "Email 2FA Setup Complete!"),
-                createElementVNode("p", { class: "email-mfa-setup-completion-description" }, " Email verification is now active for your account. You'll receive codes at your registered email address. ")
-              ], -1)),
-              _cache[14] || (_cache[14] = createElementVNode("div", { class: "email-mfa-setup-info" }, [
-                createElementVNode("div", { class: "email-mfa-setup-info-content" }, [
-                  createElementVNode("svg", {
-                    class: "email-mfa-setup-info-icon",
-                    fill: "currentColor",
-                    viewBox: "0 0 20 20"
-                  }, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
-                      "clip-rule": "evenodd"
-                    })
-                  ]),
-                  createElementVNode("div", null, [
-                    createElementVNode("p", { class: "email-mfa-setup-info-title" }, "How it works"),
-                    createElementVNode("p", { class: "email-mfa-setup-info-description" }, " When logging in, you'll receive a 6-digit code at your email address. Enter this code to complete authentication. ")
-                  ])
+                createElementVNode("div", null, [
+                  createElementVNode("p", { class: "email-mfa-setup-info-title" }, "How it works"),
+                  createElementVNode("p", { class: "email-mfa-setup-info-description" }, " When logging in, you'll receive a 6-digit code at your email address. Enter this code to complete authentication. ")
                 ])
-              ], -1)),
-              createElementVNode("div", _hoisted_8$8, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: finish
-                }, {
-                  default: withCtx(() => [..._cache[12] || (_cache[12] = [
-                    createTextVNode(" Done ", -1)
-                  ])]),
-                  _: 1
-                })
               ])
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["modelValue"])
-      ]);
+            ], -1)),
+            createElementVNode("div", _hoisted_7$8, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: finish
+              }, {
+                default: withCtx(() => [..._cache[12] || (_cache[12] = [
+                  createTextVNode(" Done ", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
     };
   }
 });
-const StrandsEmailMfaSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-1debeb3e"]]);
-const _hoisted_1$d = { class: "accui-component-scope" };
-const _hoisted_2$b = {
+const StrandsEmailMfaSetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-238346d9"]]);
+const _hoisted_1$d = {
   key: 0,
   class: "hardware-key-setup-step"
 };
-const _hoisted_3$a = { class: "hardware-key-setup-actions" };
-const _hoisted_4$a = {
+const _hoisted_2$b = { class: "hardware-key-setup-actions" };
+const _hoisted_3$a = {
   key: 1,
   class: "hardware-key-setup-step"
 };
-const _hoisted_5$8 = { class: "hardware-key-setup-instructions" };
-const _hoisted_6$7 = { class: "hardware-key-setup-instructions-header" };
-const _hoisted_7$7 = { class: "hardware-key-setup-instructions-list" };
-const _hoisted_8$7 = { class: "hardware-key-setup-actions" };
-const _hoisted_9$7 = {
+const _hoisted_4$a = { class: "hardware-key-setup-instructions" };
+const _hoisted_5$8 = { class: "hardware-key-setup-instructions-header" };
+const _hoisted_6$7 = { class: "hardware-key-setup-instructions-list" };
+const _hoisted_7$7 = { class: "hardware-key-setup-actions" };
+const _hoisted_8$7 = {
   key: 2,
   class: "hardware-key-setup-step"
 };
-const _hoisted_10$7 = { class: "hardware-key-setup-progress" };
-const _hoisted_11$7 = { class: "hardware-key-setup-progress-icon" };
-const _hoisted_12$7 = { class: "hardware-key-setup-progress-message" };
-const _hoisted_13$7 = {
+const _hoisted_9$7 = { class: "hardware-key-setup-progress" };
+const _hoisted_10$7 = { class: "hardware-key-setup-progress-icon" };
+const _hoisted_11$7 = { class: "hardware-key-setup-progress-message" };
+const _hoisted_12$7 = {
   key: 3,
   class: "hardware-key-setup-step"
 };
-const _hoisted_14$7 = { class: "hardware-key-setup-backup-codes" };
-const _hoisted_15$6 = { class: "hardware-key-setup-codes-container" };
-const _hoisted_16$6 = { class: "hardware-key-setup-codes-grid" };
-const _hoisted_17$5 = { class: "hardware-key-setup-copy-action" };
-const _hoisted_18$4 = { class: "hardware-key-setup-final-action" };
-const _hoisted_19$3 = {
+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$6 = { class: "hardware-key-setup-copy-action" };
+const _hoisted_17$5 = { class: "hardware-key-setup-final-action" };
+const _hoisted_18$4 = {
   key: 4,
   class: "hardware-key-setup-step"
 };
-const _hoisted_20$3 = { class: "hardware-key-setup-error" };
-const _hoisted_21$3 = { class: "hardware-key-setup-error-message" };
-const _hoisted_22$3 = { class: "hardware-key-setup-actions" };
+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 _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "StrandsHardwareKeySetupModal",
   props: {
@@ -35600,61 +35736,146 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       emit("success");
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createVNode(UiModal, {
-          modelValue: showModal.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showModal.value = $event),
-          title: modalTitle.value,
-          "card-class": "hardware-key-setup-modal"
-        }, {
-          default: withCtx(() => [
-            step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
-              _cache[6] || (_cache[6] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Name Your Hardware Key"),
-                createElementVNode("p", { class: "hardware-key-setup-step-description" }, ' Give your hardware key a memorable name (e.g., "YubiKey 5", "Work Security Key") ')
-              ], -1)),
-              createVNode(unref(StrandsUiInput), {
-                modelValue: deviceName.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => deviceName.value = $event),
-                label: "Device Name",
-                placeholder: "My Hardware Key",
-                error: deviceNameError.value,
+      return openBlock(), createBlock(UiModal, {
+        modelValue: showModal.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showModal.value = $event),
+        title: modalTitle.value,
+        "card-class": "hardware-key-setup-modal"
+      }, {
+        default: withCtx(() => [
+          step.value === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
+            _cache[6] || (_cache[6] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Name Your Hardware Key"),
+              createElementVNode("p", { class: "hardware-key-setup-step-description" }, ' Give your hardware key a memorable name (e.g., "YubiKey 5", "Work Security Key") ')
+            ], -1)),
+            createVNode(unref(StrandsUiInput), {
+              modelValue: deviceName.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => deviceName.value = $event),
+              label: "Device Name",
+              placeholder: "My Hardware Key",
+              error: deviceNameError.value,
+              disabled: loading2.value
+            }, null, 8, ["modelValue", "error", "disabled"]),
+            createElementVNode("div", _hoisted_2$b, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: closeModal,
                 disabled: loading2.value
-              }, null, 8, ["modelValue", "error", "disabled"]),
-              createElementVNode("div", _hoisted_3$a, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: closeModal,
-                  disabled: loading2.value
-                }, {
-                  default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                    createTextVNode(" Cancel ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: startSetup,
-                  disabled: !deviceName.value.trim() || loading2.value,
-                  loading: loading2.value
-                }, {
-                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                    createTextVNode(" Continue ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled", "loading"])
+              }, {
+                default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                  createTextVNode(" Cancel ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: startSetup,
+                disabled: !deviceName.value.trim() || loading2.value,
+                loading: loading2.value
+              }, {
+                default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  createTextVNode(" Continue ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
+            _cache[17] || (_cache[17] = createElementVNode("div", null, [
+              createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Register Hardware Key"),
+              createElementVNode("p", { class: "hardware-key-setup-step-description" }, " Insert your hardware key and follow your browser's prompts to complete registration. ")
+            ], -1)),
+            _cache[18] || (_cache[18] = createElementVNode("div", { class: "hardware-key-setup-illustration" }, [
+              createElementVNode("div", { class: "hardware-key-setup-illustration-content" }, [
+                createElementVNode("div", { class: "hardware-key-setup-icon-container" }, [
+                  createElementVNode("svg", {
+                    class: "hardware-key-setup-icon",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24"
+                  }, [
+                    createElementVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M15 7a2 2 0 012 2m0 0a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2m0 0V7a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h3m0 0v8m0-8h8m-8 8h8"
+                    })
+                  ])
+                ]),
+                createElementVNode("p", { class: "hardware-key-setup-status" }, "Hardware Key Ready"),
+                createElementVNode("p", { class: "hardware-key-setup-substatus" }, 'Click "Register Key" when ready')
               ])
-            ])) : createCommentVNode("", true),
-            step.value === 2 ? (openBlock(), createElementBlock("div", _hoisted_4$a, [
-              _cache[17] || (_cache[17] = createElementVNode("div", null, [
-                createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Register Hardware Key"),
-                createElementVNode("p", { class: "hardware-key-setup-step-description" }, " Insert your hardware key and follow your browser's prompts to complete registration. ")
-              ], -1)),
-              _cache[18] || (_cache[18] = createElementVNode("div", { class: "hardware-key-setup-illustration" }, [
-                createElementVNode("div", { class: "hardware-key-setup-illustration-content" }, [
-                  createElementVNode("div", { class: "hardware-key-setup-icon-container" }, [
+            ], -1)),
+            createElementVNode("div", _hoisted_4$a, [
+              createElementVNode("div", _hoisted_5$8, [
+                _cache[14] || (_cache[14] = createElementVNode("svg", {
+                  class: "hardware-key-setup-info-icon",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  createElementVNode("path", {
+                    "fill-rule": "evenodd",
+                    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+                    "clip-rule": "evenodd"
+                  })
+                ], -1)),
+                createElementVNode("div", null, [
+                  _cache[13] || (_cache[13] = createElementVNode("p", { class: "hardware-key-setup-instructions-title" }, "Setup Instructions", -1)),
+                  createElementVNode("ul", _hoisted_6$7, [
+                    props.deviceType === "passkey" ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
+                      _cache[7] || (_cache[7] = createElementVNode("li", null, "• Your browser will prompt you to create a passkey", -1)),
+                      _cache[8] || (_cache[8] = createElementVNode("li", null, "• Use Touch ID, Face ID, Windows Hello, or PIN", -1)),
+                      _cache[9] || (_cache[9] = createElementVNode("li", null, "• Follow the prompts to complete setup", -1))
+                    ], 64)) : (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
+                      _cache[10] || (_cache[10] = createElementVNode("li", null, "• Insert your hardware key into a USB port", -1)),
+                      _cache[11] || (_cache[11] = createElementVNode("li", null, "• Your browser will prompt you to interact with the key", -1)),
+                      _cache[12] || (_cache[12] = createElementVNode("li", null, "• Touch the key's button or sensor when prompted", -1))
+                    ], 64))
+                  ])
+                ])
+              ])
+            ]),
+            createElementVNode("div", _hoisted_7$7, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
+                disabled: loading2.value
+              }, {
+                default: withCtx(() => [..._cache[15] || (_cache[15] = [
+                  createTextVNode(" Back ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled"]),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: handleRegisterHardwareKey,
+                disabled: loading2.value,
+                loading: loading2.value
+              }, {
+                default: withCtx(() => [..._cache[16] || (_cache[16] = [
+                  createTextVNode(" Register Key ", -1)
+                ])]),
+                _: 1
+              }, 8, ["disabled", "loading"])
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_8$7, [
+            createElementVNode("div", _hoisted_9$7, [
+              createElementVNode("div", _hoisted_10$7, [
+                createVNode(unref(StrandsUiLoader), {
+                  size: 24,
+                  class: "hardware-key-setup-loader"
+                })
+              ]),
+              _cache[19] || (_cache[19] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registering Hardware Key", -1)),
+              createElementVNode("p", _hoisted_11$7, toDisplayString(registrationMessage.value), 1)
+            ]),
+            _cache[20] || (_cache[20] = createElementVNode("div", { class: "hardware-key-setup-progress-indicator" }, [
+              createElementVNode("div", { class: "hardware-key-setup-progress-content" }, [
+                createElementVNode("div", { class: "hardware-key-setup-progress-check" }, [
+                  createElementVNode("div", { class: "hardware-key-setup-check-icon" }, [
                     createElementVNode("svg", {
-                      class: "hardware-key-setup-icon",
+                      class: "hardware-key-setup-check",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24"
@@ -35663,223 +35884,136 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         "stroke-linecap": "round",
                         "stroke-linejoin": "round",
                         "stroke-width": "2",
-                        d: "M15 7a2 2 0 012 2m0 0a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2m0 0V7a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h3m0 0v8m0-8h8m-8 8h8"
+                        d: "M5 13l4 4L19 7"
                       })
                     ])
-                  ]),
-                  createElementVNode("p", { class: "hardware-key-setup-status" }, "Hardware Key Ready"),
-                  createElementVNode("p", { class: "hardware-key-setup-substatus" }, 'Click "Register Key" when ready')
-                ])
-              ], -1)),
-              createElementVNode("div", _hoisted_5$8, [
-                createElementVNode("div", _hoisted_6$7, [
-                  _cache[14] || (_cache[14] = createElementVNode("svg", {
-                    class: "hardware-key-setup-info-icon",
-                    fill: "currentColor",
-                    viewBox: "0 0 20 20"
-                  }, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
-                      "clip-rule": "evenodd"
-                    })
-                  ], -1)),
-                  createElementVNode("div", null, [
-                    _cache[13] || (_cache[13] = createElementVNode("p", { class: "hardware-key-setup-instructions-title" }, "Setup Instructions", -1)),
-                    createElementVNode("ul", _hoisted_7$7, [
-                      props.deviceType === "passkey" ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
-                        _cache[7] || (_cache[7] = createElementVNode("li", null, "• Your browser will prompt you to create a passkey", -1)),
-                        _cache[8] || (_cache[8] = createElementVNode("li", null, "• Use Touch ID, Face ID, Windows Hello, or PIN", -1)),
-                        _cache[9] || (_cache[9] = createElementVNode("li", null, "• Follow the prompts to complete setup", -1))
-                      ], 64)) : (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
-                        _cache[10] || (_cache[10] = createElementVNode("li", null, "• Insert your hardware key into a USB port", -1)),
-                        _cache[11] || (_cache[11] = createElementVNode("li", null, "• Your browser will prompt you to interact with the key", -1)),
-                        _cache[12] || (_cache[12] = createElementVNode("li", null, "• Touch the key's button or sensor when prompted", -1))
-                      ], 64))
-                    ])
                   ])
+                ]),
+                createElementVNode("p", { class: "hardware-key-setup-progress-text" }, "Touch your hardware key to complete registration")
+              ])
+            ], -1))
+          ])) : createCommentVNode("", true),
+          step.value === 4 ? (openBlock(), createElementBlock("div", _hoisted_12$7, [
+            _cache[24] || (_cache[24] = createElementVNode("div", { class: "hardware-key-setup-success" }, [
+              createElementVNode("div", { class: "hardware-key-setup-success-icon" }, [
+                createElementVNode("svg", {
+                  class: "hardware-key-setup-success-check",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  createElementVNode("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M5 13l4 4L19 7"
+                  })
                 ])
               ]),
-              createElementVNode("div", _hoisted_8$7, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "secondary",
-                  onClick: _cache[1] || (_cache[1] = ($event) => step.value = 1),
-                  disabled: loading2.value
-                }, {
-                  default: withCtx(() => [..._cache[15] || (_cache[15] = [
-                    createTextVNode(" Back ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled"]),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: handleRegisterHardwareKey,
-                  disabled: loading2.value,
-                  loading: loading2.value
-                }, {
-                  default: withCtx(() => [..._cache[16] || (_cache[16] = [
-                    createTextVNode(" Register Key ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["disabled", "loading"])
-              ])
-            ])) : createCommentVNode("", true),
-            step.value === 3 ? (openBlock(), createElementBlock("div", _hoisted_9$7, [
-              createElementVNode("div", _hoisted_10$7, [
-                createElementVNode("div", _hoisted_11$7, [
-                  createVNode(unref(StrandsUiLoader), {
-                    size: 24,
-                    class: "hardware-key-setup-loader"
+              createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Hardware Key Setup Complete!"),
+              createElementVNode("p", { class: "hardware-key-setup-success-message" }, " Your hardware key is now active for two-factor authentication. ")
+            ], -1)),
+            createElementVNode("div", _hoisted_13$7, [
+              _cache[22] || (_cache[22] = createElementVNode("div", { class: "hardware-key-setup-backup-codes-header" }, [
+                createElementVNode("svg", {
+                  class: "hardware-key-setup-warning-icon",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  createElementVNode("path", {
+                    "fill-rule": "evenodd",
+                    d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                    "clip-rule": "evenodd"
                   })
                 ]),
-                _cache[19] || (_cache[19] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registering Hardware Key", -1)),
-                createElementVNode("p", _hoisted_12$7, toDisplayString(registrationMessage.value), 1)
-              ]),
-              _cache[20] || (_cache[20] = createElementVNode("div", { class: "hardware-key-setup-progress-indicator" }, [
-                createElementVNode("div", { class: "hardware-key-setup-progress-content" }, [
-                  createElementVNode("div", { class: "hardware-key-setup-progress-check" }, [
-                    createElementVNode("div", { class: "hardware-key-setup-check-icon" }, [
-                      createElementVNode("svg", {
-                        class: "hardware-key-setup-check",
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24"
-                      }, [
-                        createElementVNode("path", {
-                          "stroke-linecap": "round",
-                          "stroke-linejoin": "round",
-                          "stroke-width": "2",
-                          d: "M5 13l4 4L19 7"
-                        })
-                      ])
-                    ])
-                  ]),
-                  createElementVNode("p", { class: "hardware-key-setup-progress-text" }, "Touch your hardware key to complete registration")
+                createElementVNode("div", null, [
+                  createElementVNode("p", { class: "hardware-key-setup-backup-codes-title" }, "Save These Backup Codes"),
+                  createElementVNode("p", { class: "hardware-key-setup-backup-codes-description" }, " Store these codes in a safe place. Each code can only be used once if you lose your hardware key. ")
                 ])
-              ], -1))
-            ])) : createCommentVNode("", true),
-            step.value === 4 ? (openBlock(), createElementBlock("div", _hoisted_13$7, [
-              _cache[24] || (_cache[24] = createElementVNode("div", { class: "hardware-key-setup-success" }, [
-                createElementVNode("div", { class: "hardware-key-setup-success-icon" }, [
-                  createElementVNode("svg", {
-                    class: "hardware-key-setup-success-check",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24"
-                  }, [
-                    createElementVNode("path", {
-                      "stroke-linecap": "round",
-                      "stroke-linejoin": "round",
-                      "stroke-width": "2",
-                      d: "M5 13l4 4L19 7"
-                    })
-                  ])
-                ]),
-                createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Hardware Key Setup Complete!"),
-                createElementVNode("p", { class: "hardware-key-setup-success-message" }, " Your hardware key is now active for two-factor authentication. ")
               ], -1)),
               createElementVNode("div", _hoisted_14$7, [
-                _cache[22] || (_cache[22] = createElementVNode("div", { class: "hardware-key-setup-backup-codes-header" }, [
-                  createElementVNode("svg", {
-                    class: "hardware-key-setup-warning-icon",
-                    fill: "currentColor",
-                    viewBox: "0 0 20 20"
-                  }, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-                      "clip-rule": "evenodd"
-                    })
-                  ]),
-                  createElementVNode("div", null, [
-                    createElementVNode("p", { class: "hardware-key-setup-backup-codes-title" }, "Save These Backup Codes"),
-                    createElementVNode("p", { class: "hardware-key-setup-backup-codes-description" }, " Store these codes in a safe place. Each code can only be used once if you lose your hardware key. ")
-                  ])
-                ], -1)),
                 createElementVNode("div", _hoisted_15$6, [
-                  createElementVNode("div", _hoisted_16$6, [
-                    (openBlock(true), createElementBlock(Fragment$1, null, renderList(backupCodes.value, (code, index) => {
-                      return openBlock(), createElementBlock("div", {
-                        key: index,
-                        class: "hardware-key-setup-code"
-                      }, toDisplayString(code), 1);
-                    }), 128))
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_17$5, [
-                  createVNode(unref(CompoundUiButton), {
-                    variant: "secondary",
-                    size: "sm",
-                    onClick: copyBackupCodes
-                  }, {
-                    default: withCtx(() => [..._cache[21] || (_cache[21] = [
-                      createTextVNode(" 📋 Copy Codes ", -1)
-                    ])]),
-                    _: 1
-                  })
+                  (openBlock(true), createElementBlock(Fragment$1, null, renderList(backupCodes.value, (code, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: index,
+                      class: "hardware-key-setup-code"
+                    }, toDisplayString(code), 1);
+                  }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_18$4, [
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: finish
-                }, {
-                  default: withCtx(() => [..._cache[23] || (_cache[23] = [
-                    createTextVNode(" Done ", -1)
-                  ])]),
-                  _: 1
-                })
-              ])
-            ])) : createCommentVNode("", true),
-            step.value === 5 ? (openBlock(), createElementBlock("div", _hoisted_19$3, [
-              createElementVNode("div", _hoisted_20$3, [
-                _cache[25] || (_cache[25] = createElementVNode("div", { class: "hardware-key-setup-error-icon" }, [
-                  createElementVNode("svg", {
-                    class: "hardware-key-setup-error-x",
-                    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)),
-                _cache[26] || (_cache[26] = createElementVNode("h3", { class: "hardware-key-setup-step-title" }, "Registration Failed", -1)),
-                createElementVNode("p", _hoisted_21$3, toDisplayString(errorMessage.value), 1)
-              ]),
-              createElementVNode("div", _hoisted_22$3, [
+              createElementVNode("div", _hoisted_16$6, [
                 createVNode(unref(CompoundUiButton), {
                   variant: "secondary",
-                  onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1)
-                }, {
-                  default: withCtx(() => [..._cache[27] || (_cache[27] = [
-                    createTextVNode(" Start Over ", -1)
-                  ])]),
-                  _: 1
-                }),
-                createVNode(unref(CompoundUiButton), {
-                  variant: "primary",
-                  onClick: closeModal
+                  size: "sm",
+                  onClick: copyBackupCodes
                 }, {
-                  default: withCtx(() => [..._cache[28] || (_cache[28] = [
-                    createTextVNode(" Close ", -1)
+                  default: withCtx(() => [..._cache[21] || (_cache[21] = [
+                    createTextVNode(" 📋 Copy Codes ", -1)
                   ])]),
                   _: 1
                 })
               ])
-            ])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["modelValue", "title"])
-      ]);
+            ]),
+            createElementVNode("div", _hoisted_17$5, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: finish
+              }, {
+                default: withCtx(() => [..._cache[23] || (_cache[23] = [
+                  createTextVNode(" Done ", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])) : createCommentVNode("", true),
+          step.value === 5 ? (openBlock(), createElementBlock("div", _hoisted_18$4, [
+            createElementVNode("div", _hoisted_19$3, [
+              _cache[25] || (_cache[25] = createElementVNode("div", { class: "hardware-key-setup-error-icon" }, [
+                createElementVNode("svg", {
+                  class: "hardware-key-setup-error-x",
+                  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)),
+              _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("div", _hoisted_21$3, [
+              createVNode(unref(CompoundUiButton), {
+                variant: "secondary",
+                onClick: _cache[2] || (_cache[2] = ($event) => step.value = 1)
+              }, {
+                default: withCtx(() => [..._cache[27] || (_cache[27] = [
+                  createTextVNode(" Start Over ", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(unref(CompoundUiButton), {
+                variant: "primary",
+                onClick: closeModal
+              }, {
+                default: withCtx(() => [..._cache[28] || (_cache[28] = [
+                  createTextVNode(" Close ", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "title"]);
     };
   }
 });
-const StrandsHardwareKeySetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-0c710fca"]]);
+const StrandsHardwareKeySetupModal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-40b99818"]]);
 const _hoisted_1$c = { class: "accui-component-scope" };
 const _hoisted_2$a = {
   key: 0,
@@ -36741,7 +36875,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsMfaModal = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-966c5aa3"]]);
+const StrandsMfaModal = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-64c9f1a1"]]);
 const _hoisted_1$9 = { class: "accui-component-scope" };
 const _hoisted_2$7 = { class: "settings-content" };
 const _hoisted_3$6 = { class: "settings-section" };
@@ -37358,7 +37492,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsSessionsModal = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-ad35901a"]]);
+const StrandsSessionsModal = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-d48515ac"]]);
 const _hoisted_1$7 = { class: "accui-component-scope" };
 const _hoisted_2$5 = { class: "profile-content-layout" };
 const _hoisted_3$4 = { class: "profile-image-section" };
@@ -38210,7 +38344,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             createElementVNode("p", _hoisted_15$2, toDisplayString(currentUser.value?.email), 1)
                           ]),
                           createVNode(unref(CompoundUiButton), {
-                            variant: "secondary",
+                            color: "secondary",
                             size: "sm",
                             onClick: _cache[2] || (_cache[2] = ($event) => showEmailChange.value = !showEmailChange.value)
                           }, {
@@ -38240,7 +38374,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                                 error: emailChangeForm.errors.password
                               }, null, 8, ["modelValue", "error"]),
                               createVNode(unref(CompoundUiButton), {
-                                variant: "primary",
+                                color: "secondary",
                                 size: "sm",
                                 onClick: handleEmailChange,
                                 disabled: !isEmailChangeFormValid.value || emailChangeLoading.value
@@ -38262,7 +38396,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             createElementVNode("p", _hoisted_19, toDisplayString(currentUser.value?.username || "No username set"), 1)
                           ]),
                           createVNode(unref(CompoundUiButton), {
-                            variant: "secondary",
+                            color: "secondary",
                             size: "sm",
                             disabled: !usernameChangeData.canChange || usernameChangeLoading.value,
                             onClick: handleToggleUsernameChange
@@ -38289,7 +38423,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                                 class: normalizeClass(["profile-availability-message", usernameAvailability.available ? "success" : "error"])
                               }, toDisplayString(usernameAvailability.message), 3)) : createCommentVNode("", true),
                               createVNode(unref(CompoundUiButton), {
-                                variant: "primary",
+                                color: "secondary",
                                 size: "sm",
                                 onClick: handleUsernameChange,
                                 disabled: !isUsernameChangeFormValid.value || usernameChangeLoading.value
@@ -38314,7 +38448,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             createElementVNode("p", _hoisted_24, "Last updated " + toDisplayString(passwordLastUpdated.value), 1)
                           ]),
                           createVNode(unref(CompoundUiButton), {
-                            variant: "secondary",
+                            color: "secondary",
                             size: "sm",
                             onClick: _cache[6] || (_cache[6] = ($event) => showPasswordChange.value = !showPasswordChange.value)
                           }, {
@@ -38349,7 +38483,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                                 autocomplete: "new-password"
                               }, null, 8, ["modelValue"]),
                               createVNode(unref(CompoundUiButton), {
-                                variant: "primary",
+                                color: "secondary",
                                 size: "sm",
                                 onClick: handlePasswordChange,
                                 disabled: !isPasswordFormValid.value
@@ -38388,7 +38522,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             ])) : createCommentVNode("", true)
                           ]),
                           createVNode(unref(CompoundUiButton), {
-                            variant: "secondary",
+                            color: "secondary",
                             size: "sm",
                             class: "profile-toggle-container",
                             onClick: _cache[10] || (_cache[10] = ($event) => showMfaModal.value = true)
@@ -38410,7 +38544,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                           ]),
                           createElementVNode("div", _hoisted_36, [
                             createVNode(unref(CompoundUiButton), {
-                              variant: "secondary",
+                              color: "secondary",
                               size: "sm",
                               disabled: loadingSessions.value,
                               onClick: _cache[11] || (_cache[11] = ($event) => showSessionsModal.value = true)
@@ -38428,7 +38562,6 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   hasChanges.value ? (openBlock(), createElementBlock("div", _hoisted_37, [
                     createVNode(unref(CompoundUiButton), {
                       type: "submit",
-                      variant: "primary",
                       disabled: loading2.value,
                       loading: loading2.value
                     }, {
@@ -38438,7 +38571,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                       _: 1
                     }, 8, ["disabled", "loading"]),
                     createVNode(unref(CompoundUiButton), {
-                      variant: "secondary",
+                      color: "secondary",
                       onClick: handleCancel,
                       disabled: loading2.value
                     }, {
@@ -38504,7 +38637,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                       createVNode(StrandsSettingsModal, { onSettingsUpdated: handleSettingsUpdated }, {
                         trigger: withCtx(() => [
                           createVNode(unref(CompoundUiButton), {
-                            variant: "secondary",
+                            color: "secondary",
                             class: "profile-sign-out-button"
                           }, {
                             default: withCtx(() => [..._cache[27] || (_cache[27] = [
@@ -38603,7 +38736,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-1fb79e5f"]]);
+const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-76c0144a"]]);
 const _hoisted_1$6 = { class: "accui-component-scope" };
 const _hoisted_2$4 = { class: "accui-w-full accui-min-w-100 accui-max-w-md accui-mx-auto accui-animate-slide-up" };
 const _hoisted_3$3 = { class: "accui-mt-8 accui-text-center" };
@@ -39017,7 +39150,26 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const showProfileModal = ref(false);
     const showSignInModal = ref(false);
     const containerRef = ref();
-    const profileButtonRef = ref();
+    const triggerRef = ref();
+    const dropdownRef = ref();
+    const triggerElement = computed(() => {
+      const element = triggerRef.value?.$el;
+      console.log("Trigger element:", element);
+      return element;
+    });
+    const { floatingStyle, updatePosition } = useFloatingPosition({
+      trigger: triggerElement,
+      floating: dropdownRef,
+      placement: "bottom-end",
+      offset: 8,
+      shift: true,
+      flip: true,
+      autoUpdate: true,
+      clickOutside: {
+        enabled: true,
+        handler: () => closeDropdown()
+      }
+    });
     const user = computed(() => {
       if (props.user) return props.user;
       return isAuthenticated.value ? currentUser.value : null;
@@ -39037,17 +39189,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     const toggleDropdown = () => {
       showDropdown.value = !showDropdown.value;
+      console.log("Dropdown visible:", showDropdown.value);
+      console.log("Trigger element when toggling:", triggerElement.value);
       if (showDropdown.value) {
         nextTick(() => {
-          profileButtonRef.value?.focus();
+          updatePosition();
+          console.log("Floating style after update:", floatingStyle.value);
         });
       }
     };
     const openDropdown = () => {
       showDropdown.value = true;
-      nextTick(() => {
-        profileButtonRef.value?.focus();
-      });
     };
     const closeDropdown = () => {
       showDropdown.value = false;
@@ -39057,7 +39209,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const focusPrevious = () => {
     };
     const focusFirst = () => {
-      profileButtonRef.value?.focus();
+      triggerRef.value?.$el?.focus();
     };
     const focusLast = () => {
     };
@@ -39087,17 +39239,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       } catch (error) {
       }
     };
-    const handleClickOutside = (event) => {
-      if (containerRef.value && !containerRef.value.contains(event.target)) {
-        closeDropdown();
-      }
-    };
-    onMounted(() => {
-      document.addEventListener("click", handleClickOutside);
-    });
-    onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "accui-component-scope",
@@ -39107,8 +39248,57 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         createVNode(SignedIn, {
           invert: !!props.user
         }, {
+          fallback: withCtx(() => [
+            createVNode(unref(CompoundUiButton), {
+              onClick: openSignIn,
+              "aria-label": "Sign in"
+            }, {
+              default: withCtx(() => [..._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)
+              ])]),
+              _: 1
+            }),
+            createVNode(unref(UiModal), {
+              modelValue: showSignInModal.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showSignInModal.value = $event),
+              "fullscreen-on-mobile": false
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_17$1, [
+                  createVNode(unref(StrandsAuth), {
+                    onSignedIn: handleSignedIn,
+                    onError: handleSignInError,
+                    "redirect-url": _ctx.redirectUrl,
+                    "in-modal": ""
+                  }, null, 8, ["redirect-url"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          loading: withCtx(() => [
+            createVNode(StrandsUiLoader, {
+              variant: "circle",
+              size: 30
+            })
+          ]),
           default: withCtx(() => [
             createVNode(unref(CompoundUiButton), {
+              ref_key: "triggerRef",
+              ref: triggerRef,
               color: "secondary",
               active: showDropdown.value,
               onClick: toggleDropdown,
@@ -39165,99 +39355,96 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       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_9$1, [
-                        createElementVNode("div", _hoisted_10$1, [
-                          user.value ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
-                            createVNode(unref(UiLevelProgress), {
-                              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_12$1)) : (openBlock(), createElementBlock("div", _hoisted_13$1, [..._cache[4] || (_cache[4] = [
-                              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_14$1, [
-                            createElementVNode("div", _hoisted_15$1, toDisplayString(displayName.value), 1),
-                            createElementVNode("div", _hoisted_16$1, toDisplayString(user.value?.email), 1)
-                          ])
-                        ]),
-                        _cache[7] || (_cache[7] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                        renderSlot(_ctx.$slots, "default", {}, void 0, true),
-                        _cache[8] || (_cache[8] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
-                        createVNode(unref(StrandsNav), null, {
-                          default: withCtx(() => [
-                            createVNode(unref(StrandsNav).Item, { onClick: openProfile }, {
-                              default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                                createTextVNode("Profile", -1)
-                              ])]),
-                              _: 1
-                            }),
-                            createVNode(unref(StrandsNav).Item, {
-                              onClick: handleSignOut,
-                              color: "danger"
-                            }, {
-                              default: withCtx(() => [..._cache[6] || (_cache[6] = [
-                                createTextVNode("Sign Out", -1)
-                              ])]),
-                              _: 1
-                            })
-                          ]),
-                          _: 1
-                        })
-                      ])
-                    ], 42, _hoisted_8$1)) : createCommentVNode("", true)
-                  ]),
-                  _: 3
-                })
+                ])
               ]),
-              _: 3
+              _: 1
             }, 8, ["active", "onKeydown", "aria-expanded"]),
+            (openBlock(), createBlock(Teleport, { to: "body" }, [
+              showDropdown.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "dropdownRef",
+                ref: dropdownRef,
+                class: "strands-user-dropdown",
+                style: normalizeStyle(unref(floatingStyle)),
+                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_9$1, [
+                  createElementVNode("div", _hoisted_10$1, [
+                    user.value ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
+                      createVNode(unref(UiLevelProgress), {
+                        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_12$1)) : (openBlock(), createElementBlock("div", _hoisted_13$1, [..._cache[4] || (_cache[4] = [
+                        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_14$1, [
+                      createElementVNode("div", _hoisted_15$1, toDisplayString(displayName.value), 1),
+                      createElementVNode("div", _hoisted_16$1, toDisplayString(user.value?.email), 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, {
+                        color: "secondary",
+                        onClick: openProfile
+                      }, {
+                        default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                          createTextVNode("Profile", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      createVNode(unref(StrandsNav).Item, {
+                        color: "danger",
+                        onClick: handleSignOut
+                      }, {
+                        default: withCtx(() => [..._cache[6] || (_cache[6] = [
+                          createTextVNode("Sign Out", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ])
+              ], 44, _hoisted_8$1)) : createCommentVNode("", true)
+            ])),
             createVNode(unref(UiModal), {
               modelValue: showProfileModal.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showProfileModal.value = $event),
-              "fullscreen-on-mobile": false
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showProfileModal.value = $event)
             }, {
               default: withCtx(() => [
                 createVNode(unref(StrandsUserProfile), {
@@ -39270,60 +39457,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["modelValue"])
           ]),
-          fallback: withCtx(() => [
-            createVNode(unref(CompoundUiButton), {
-              onClick: openSignIn,
-              "aria-label": "Sign in"
-            }, {
-              default: withCtx(() => [..._cache[9] || (_cache[9] = [
-                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)
-              ])]),
-              _: 1
-            }),
-            createVNode(unref(UiModal), {
-              modelValue: showSignInModal.value,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showSignInModal.value = $event),
-              "fullscreen-on-mobile": false
-            }, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_17$1, [
-                  createVNode(unref(StrandsAuth), {
-                    onSignedIn: handleSignedIn,
-                    onError: handleSignInError,
-                    "redirect-url": _ctx.redirectUrl,
-                    "in-modal": ""
-                  }, null, 8, ["redirect-url"])
-                ])
-              ]),
-              _: 1
-            }, 8, ["modelValue"])
-          ]),
-          loading: withCtx(() => [
-            createVNode(StrandsUiLoader, {
-              variant: "circle",
-              size: 30
-            })
-          ]),
           _: 3
         }, 8, ["invert"])
       ], 512);
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-924896e1"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c4df5354"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNav",
   props: {
@@ -39372,7 +39512,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 const StrandsNavComponent = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-dfb31e47"]]);
 const _hoisted_1$2 = {
   key: 0,
-  class: "nav-item-icon",
+  class: "strands-nav-item-icon",
   fill: "none",
   stroke: "currentColor",
   viewBox: "0 0 24 24"
@@ -39380,7 +39520,7 @@ const _hoisted_1$2 = {
 const _hoisted_2$1 = ["d"];
 const _hoisted_3$1 = {
   key: 0,
-  class: "nav-item-icon",
+  class: "strands-nav-item-icon",
   fill: "none",
   stroke: "currentColor",
   viewBox: "0 0 24 24"
@@ -39389,14 +39529,20 @@ const _hoisted_4$1 = ["d"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "StrandsNavItem",
   props: {
-    type: {},
-    to: {},
-    icon: {},
-    disabled: { type: Boolean, default: false },
-    color: { default: "default" },
     variant: { default: "primary" },
     size: { default: "sm" },
-    fullWidth: { type: Boolean }
+    type: {},
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean },
+    loadingText: {},
+    fullWidth: { type: Boolean },
+    color: { default: "secondary" },
+    fontWeight: {},
+    icon: { type: Boolean },
+    squircle: { type: Boolean, default: true },
+    to: {},
+    href: {},
+    external: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -39433,45 +39579,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return "";
       }
     };
-    const getActualType = () => {
-      return props.type || (props.to ? "link" : "button");
-    };
-    const getActualFullWidth = () => {
-      if (props.fullWidth !== void 0) {
-        return props.fullWidth;
-      }
-      if (props.type === "button") {
-        return false;
-      } else {
-        return true;
-      }
-    };
-    const getNavItemComponent = () => {
-      const actualType = getActualType();
-      if (actualType === "button" && props.type === "button") {
-        return CompoundUiButton;
-      } else if (props.to) {
-        return "router-link";
-      } else {
-        return "button";
-      }
-    };
     const getNavItemClasses = () => {
-      const actualType = getActualType();
-      if (actualType === "button" && props.type === "button") {
+      if (props.type === "button") {
         return "";
       } else {
         const classes = [
-          "nav-item",
-          `nav-item-${actualType}`,
-          `nav-item-color-${props.color}`,
-          { "nav-item-disabled": props.disabled }
+          "strands-nav-item",
+          `strands-nav-item--color-${props.color}`,
+          { "strands-nav-item--disabled": props.disabled }
         ];
-        if (getActualFullWidth()) {
-          classes.push("nav-item-full-width");
-        } else {
-          classes.push("nav-item-inline");
-        }
         return classes;
       }
     };
@@ -39511,15 +39627,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     }, { deep: true });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(getNavItemComponent()), {
+      return openBlock(), createBlock(unref(CompoundUiButton), {
         to: props.to,
         onClick: handleClick2,
         class: normalizeClass(getNavItemClasses()),
         variant: props.variant,
-        size: props.size,
         color: props.color,
+        size: props.size,
+        squircle: props.squircle,
         disabled: props.disabled,
-        "full-width": props.type === "button" ? getActualFullWidth() : void 0,
+        "full-width": "",
         role: isInMenuContext.value ? "menuitem" : void 0,
         tabindex: "-1"
       }, createSlots({
@@ -39532,7 +39649,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               d: getIconPath(props.icon)
             }, null, 8, _hoisted_4$1)
           ])) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          renderSlot(_ctx.$slots, "default")
         ]),
         _: 2
       }, [
@@ -39550,13 +39667,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["to", "class", "variant", "size", "color", "disabled", "full-width", "role"]);
+      ]), 1032, ["to", "class", "variant", "color", "size", "squircle", "disabled", "role"]);
     };
   }
 });
-const StrandsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7ba66b20"]]);
 const StrandsNav = StrandsNavComponent;
-StrandsNav.Item = StrandsNavItem;
+StrandsNav.Item = _sfc_main$2;
 const _hoisted_1$1 = { class: "accui-p-2 accui-border-b" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "VirtualList",
@@ -40242,7 +40358,7 @@ export {
   StrandsMfaModal,
   StrandsMfaVerification,
   StrandsNav,
-  StrandsNavItem,
+  _sfc_main$2 as StrandsNavItem,
   StrandsPasswordReset,
   StrandsSecuredFooter,
   StrandsSessionsModal,
@@ -40311,6 +40427,9 @@ export {
   tailwindColors,
   useAuthenticatedFetch,
   useFloatingPosition,
+  useGlobalModalStack,
+  useModalStack,
+  useModalTeleport,
   useOAuthProviders,
   useStrandsAuth,
   useStrandsConfig,