@asgardeo/vue 0.3.2 → 0.3.4

package/dist/index.js

@@ -4074,8 +4074,11 @@ function injectStyles() {
 
 // src/plugins/AsgardeoPlugin.ts
 var AsgardeoPlugin = {
-  install(app) {
+  install(app, options) {
     injectStyles();
+    if (options?.mode === "delegated") {
+      return;
+    }
     app.component("AsgardeoProvider", AsgardeoProvider_default);
   }
 };
@@ -8244,26 +8247,695 @@ var BaseSignIn3 = defineComponent44({
 var BaseSignIn_default3 = BaseSignIn3;
 
 // src/components/presentation/sign-up/SignUp.ts
+import { Platform as Platform5 } from "@asgardeo/browser";
+import { defineComponent as defineComponent49, h as h52 } from "vue";
+
+// src/components/presentation/sign-up/v1/SignUp.ts
 import {
   EmbeddedFlowResponseType as EmbeddedFlowResponseType2,
   EmbeddedFlowType as EmbeddedFlowType2
 } from "@asgardeo/browser";
-import { defineComponent as defineComponent46, h as h48 } from "vue";
+import { defineComponent as defineComponent46, h as h49 } from "vue";
 
-// src/components/presentation/sign-up/BaseSignUp.ts
+// src/components/presentation/sign-up/v1/BaseSignUp.ts
 import {
-  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType2,
+  EmbeddedFlowComponentType as EmbeddedFlowComponentType3,
   EmbeddedFlowResponseType,
   EmbeddedFlowStatus,
   withVendorCSSClassPrefix as withVendorCSSClassPrefix19
 } from "@asgardeo/browser";
 import {
   defineComponent as defineComponent45,
-  h as h47,
+  h as h48,
   ref as ref17,
   watch as watch10
 } from "vue";
 
+// src/components/presentation/sign-up/v1/options/SignUpOptionFactory.ts
+import { EmbeddedFlowComponentType as EmbeddedFlowComponentType2, FieldType as FieldType4 } from "@asgardeo/browser";
+import { h as h47 } from "vue";
+var getInputName = (component) => {
+  const cfg = component.config || {};
+  return cfg.name || cfg.identifier || component.id;
+};
+var inferFieldType = (component) => {
+  const variant = String(component.variant || "").toUpperCase();
+  const cfg = component.config || {};
+  const cfgType = String(cfg.type || "").toLowerCase();
+  if (variant === "EMAIL" || cfgType === "email") return FieldType4.Email;
+  if (variant === "PASSWORD" || cfgType === "password") return FieldType4.Password;
+  if (variant === "TELEPHONE" || cfgType === "tel") return FieldType4.Text;
+  if (variant === "NUMBER" || cfgType === "number") return FieldType4.Number;
+  if (variant === "DATE" || cfgType === "date") return FieldType4.Date;
+  if (variant === "CHECKBOX" || cfgType === "checkbox") return FieldType4.Checkbox;
+  return FieldType4.Text;
+};
+var inferTypographyVariant = (component) => {
+  const variant = String(component.variant || "").toUpperCase();
+  switch (variant) {
+    case "H1":
+      return "h1";
+    case "H2":
+      return "h2";
+    case "H3":
+      return "h3";
+    case "H4":
+      return "h4";
+    case "H5":
+      return "h5";
+    case "H6":
+      return "h6";
+    case "SUBTITLE1":
+      return "subtitle1";
+    case "SUBTITLE2":
+      return "subtitle2";
+    case "BODY2":
+      return "body2";
+    case "CAPTION":
+      return "caption";
+    case "OVERLINE":
+      return "overline";
+    default:
+      return "body1";
+  }
+};
+var matchesSocialProvider2 = (component, provider) => {
+  const text = String(component?.config?.text || component?.config?.label || "").toLowerCase();
+  const variant = String(component?.variant || "").toUpperCase();
+  return variant === "SOCIAL" && text.includes(provider);
+};
+var createSignUpComponent = (props) => {
+  const {
+    component,
+    formValues,
+    touchedFields,
+    formErrors,
+    isLoading,
+    isFormValid,
+    onInputChange,
+    onSubmit,
+    inputClassName,
+    buttonClassName
+  } = props;
+  const cfg = component.config || {};
+  switch (component.type) {
+    case EmbeddedFlowComponentType2.Typography: {
+      const text = String(cfg.text || cfg.label || "");
+      return h47(
+        Typography_default,
+        { style: "margin-bottom:0.5rem", variant: inferTypographyVariant(component) },
+        { default: () => text }
+      );
+    }
+    case EmbeddedFlowComponentType2.Input: {
+      const name = getInputName(component);
+      const fieldType = inferFieldType(component);
+      const value = formValues[name] || "";
+      const isTouched = touchedFields[name] || false;
+      const error = isTouched ? formErrors[name] : void 0;
+      return createField({
+        className: inputClassName,
+        disabled: isLoading,
+        error,
+        label: String(cfg.label || ""),
+        name,
+        onChange: (newValue) => onInputChange(name, newValue),
+        placeholder: String(cfg.placeholder || ""),
+        required: Boolean(cfg.required),
+        touched: isTouched,
+        type: fieldType,
+        value
+      });
+    }
+    case EmbeddedFlowComponentType2.Button: {
+      const text = String(cfg.text || cfg.label || "Submit");
+      const variant = String(component.variant || "PRIMARY").toUpperCase();
+      const isPrimary = variant === "PRIMARY";
+      const handleClick = () => onSubmit(component, void 0);
+      if (matchesSocialProvider2(component, "google")) {
+        return h47(GoogleButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+      }
+      if (matchesSocialProvider2(component, "github")) {
+        return h47(GitHubButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+      }
+      if (matchesSocialProvider2(component, "microsoft")) {
+        return h47(MicrosoftButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+      }
+      if (matchesSocialProvider2(component, "facebook")) {
+        return h47(FacebookButton_default, { class: buttonClassName, isLoading, onClick: handleClick });
+      }
+      return h47(
+        Button_default,
+        {
+          class: buttonClassName,
+          color: isPrimary ? "primary" : "secondary",
+          "data-testid": "asgardeo-signup-submit",
+          disabled: isLoading || !isFormValid && cfg.type === "submit",
+          fullWidth: true,
+          loading: isLoading,
+          onClick: handleClick,
+          type: cfg.type === "submit" ? "submit" : "button",
+          variant: isPrimary ? "solid" : "outline"
+        },
+        { default: () => text }
+      );
+    }
+    case EmbeddedFlowComponentType2.Form: {
+      const children = component.components || [];
+      const nodes = [];
+      children.forEach((child) => {
+        const rendered = createSignUpComponent({ ...props, component: child });
+        if (rendered === null) return;
+        if (Array.isArray(rendered)) nodes.push(...rendered);
+        else nodes.push(rendered);
+      });
+      return nodes;
+    }
+    case EmbeddedFlowComponentType2.Divider: {
+      return h47("hr", {
+        class: "asgardeo-signup__divider",
+        style: "margin:0.75rem 0;border:0;border-top:1px solid #e5e7eb"
+      });
+    }
+    case EmbeddedFlowComponentType2.Image: {
+      const src = String(cfg.src || cfg.url || "");
+      const alt = String(cfg.alt || "");
+      if (!src) return null;
+      return h47("img", { alt, src, style: "max-width:100%;height:auto;display:block;margin:0.5rem auto" });
+    }
+    default: {
+      if (String(component.type).toUpperCase() === "RICH_TEXT") {
+        const html = String(cfg.text || cfg.label || "");
+        return h47("div", { class: "asgardeo-signup__rich-text", innerHTML: html });
+      }
+      return null;
+    }
+  }
+};
+var renderSignUpComponents2 = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, onSubmit, options) => {
+  const result = [];
+  components.forEach((component) => {
+    const rendered = createSignUpComponent({
+      buttonClassName: options?.buttonClassName,
+      component,
+      formErrors,
+      formValues,
+      inputClassName: options?.inputClassName,
+      isFormValid,
+      isLoading,
+      onInputChange,
+      onSubmit,
+      size: options?.size,
+      touchedFields
+    });
+    if (rendered === null) return;
+    if (Array.isArray(rendered)) result.push(...rendered);
+    else result.push(rendered);
+  });
+  return result;
+};
+
+// src/components/presentation/sign-up/v1/BaseSignUp.ts
+var logger6 = createVueLogger("BaseSignUpV1");
+var BaseSignUp = defineComponent45({
+  emits: ["error", "flowChange", "complete"],
+  name: "BaseSignUpV1",
+  props: {
+    afterSignUpUrl: { default: void 0, type: String },
+    buttonClassName: { default: "", type: String },
+    className: { default: "", type: String },
+    errorClassName: { default: "", type: String },
+    inputClassName: { default: "", type: String },
+    isInitialized: { default: true, type: Boolean },
+    messageClassName: { default: "", type: String },
+    onComplete: { default: void 0, type: Function },
+    onError: { default: void 0, type: Function },
+    onFlowChange: {
+      default: void 0,
+      type: Function
+    },
+    onInitialize: {
+      default: void 0,
+      type: Function
+    },
+    onSubmit: {
+      default: void 0,
+      type: Function
+    },
+    shouldRedirectAfterSignUp: { default: true, type: Boolean },
+    showLogo: { default: true, type: Boolean },
+    showSubtitle: { default: true, type: Boolean },
+    showTitle: { default: true, type: Boolean },
+    size: { default: "medium", type: String },
+    variant: { default: "outlined", type: String }
+  },
+  setup(props, { slots, emit }) {
+    const { t } = useI18n_default();
+    const { title: flowTitle, subtitle: flowSubtitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
+    const isLoading = ref17(false);
+    const isFlowInitialized = ref17(false);
+    const currentFlow = ref17(null);
+    const formValues = ref17({});
+    const touchedFields = ref17({});
+    const formErrors = ref17({});
+    let initializationAttempted = false;
+    const handleError = (err) => {
+      let errorMessage = t("errors.signup.flow.failure") || "Sign-up failed";
+      if (err && typeof err === "object") {
+        if (err.code && (err.message || err.description)) {
+          errorMessage = err.description || err.message;
+        } else if (err.message) {
+          errorMessage = err.message;
+        }
+      } else if (typeof err === "string") {
+        errorMessage = err;
+      }
+      clearMessages();
+      addMessage({ message: errorMessage, type: "error" });
+    };
+    const collectInputNames = (components) => {
+      const names = [];
+      const walk = (comps) => {
+        comps.forEach((component) => {
+          const cfg = component.config || {};
+          if (component.type === EmbeddedFlowComponentType3.Input) {
+            const name = cfg.name || cfg.identifier || component.id;
+            if (name) names.push(name);
+          }
+          const children = component.components || [];
+          if (children.length > 0) walk(children);
+        });
+      };
+      walk(components);
+      return names;
+    };
+    const setupFormFields = (response) => {
+      const componentTree = response.data?.components || [];
+      const names = collectInputNames(componentTree);
+      const initial = {};
+      names.forEach((name) => {
+        initial[name] = "";
+      });
+      formValues.value = initial;
+      touchedFields.value = {};
+      formErrors.value = {};
+    };
+    const handleInputChange = (name, value) => {
+      formValues.value = { ...formValues.value, [name]: value };
+      touchedFields.value = { ...touchedFields.value, [name]: true };
+      if (formErrors.value[name]) {
+        const next = { ...formErrors.value };
+        delete next[name];
+        formErrors.value = next;
+      }
+    };
+    const isFormValid = () => Object.keys(formErrors.value).length === 0;
+    const handleRedirectionIfNeeded = (response) => {
+      if (response?.type !== EmbeddedFlowResponseType.Redirection || !response?.data?.redirectURL) {
+        return false;
+      }
+      if (typeof window === "undefined") return false;
+      const redirectUrl = response.data.redirectURL;
+      const popup = window.open(
+        redirectUrl,
+        "oauth_popup",
+        "width=500,height=600,scrollbars=yes,resizable=yes"
+      );
+      if (!popup) {
+        logger6.error("Failed to open popup window for social sign-up redirect");
+        return false;
+      }
+      let processed = false;
+      let popupMonitor;
+      let messageHandler;
+      const cleanup = () => {
+        window.removeEventListener("message", messageHandler);
+        if (popupMonitor) clearInterval(popupMonitor);
+      };
+      const continueWithCode = async (code, state) => {
+        const payload = {
+          ...currentFlow.value?.flowId && { flowId: currentFlow.value.flowId },
+          actionId: "",
+          flowType: currentFlow.value?.flowType || "REGISTRATION",
+          inputs: { code, state }
+        };
+        try {
+          const next = await props.onSubmit(payload);
+          props.onFlowChange?.(next);
+          emit("flowChange", next);
+          if (next.flowStatus === EmbeddedFlowStatus.Complete) {
+            props.onComplete?.(next);
+            emit("complete", next);
+          } else if (next.flowStatus === EmbeddedFlowStatus.Incomplete) {
+            currentFlow.value = next;
+            setupFormFields(next);
+          }
+        } catch (err) {
+          handleError(err);
+          props.onError?.(err);
+          emit("error", err);
+        } finally {
+          popup.close();
+          cleanup();
+        }
+      };
+      messageHandler = async (event) => {
+        if (event.source !== popup) return;
+        const expectedOrigin = props.afterSignUpUrl ? new URL(props.afterSignUpUrl).origin : window.location.origin;
+        if (event.origin !== expectedOrigin && event.origin !== window.location.origin) return;
+        const { code, state } = event.data || {};
+        if (code && state && !processed) {
+          processed = true;
+          await continueWithCode(code, state);
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      popupMonitor = setInterval(async () => {
+        try {
+          if (popup.closed) {
+            cleanup();
+            return;
+          }
+          if (processed) return;
+          let popupUrl;
+          try {
+            popupUrl = popup.location.href;
+          } catch {
+            return;
+          }
+          if (!popupUrl) return;
+          if (popupUrl.includes("code=") || popupUrl.includes("error=")) {
+            const url = new URL(popupUrl);
+            const code = url.searchParams.get("code");
+            const state = url.searchParams.get("state");
+            const error = url.searchParams.get("error");
+            if (error) {
+              processed = true;
+              logger6.error(`OAuth error during social sign-up: ${error}`);
+              popup.close();
+              cleanup();
+              return;
+            }
+            if (code && state) {
+              processed = true;
+              await continueWithCode(code, state);
+            }
+          }
+        } catch (err) {
+          logger6.error("Error monitoring sign-up popup");
+        }
+      }, 1e3);
+      return true;
+    };
+    const handleSubmit = async (component, data) => {
+      if (!currentFlow.value) return;
+      isLoading.value = true;
+      clearMessages();
+      try {
+        const filteredInputs = {};
+        const sourceInputs = data ?? formValues.value;
+        Object.entries(sourceInputs).forEach(([key, value]) => {
+          if (value !== null && value !== void 0 && value !== "") {
+            filteredInputs[key] = value;
+          }
+        });
+        const actionId = component?.actionId || component?.id;
+        const payload = {
+          ...currentFlow.value.flowId && { flowId: currentFlow.value.flowId },
+          flowType: currentFlow.value.flowType || "REGISTRATION",
+          inputs: filteredInputs,
+          ...actionId && { actionId }
+        };
+        const response = await props.onSubmit(payload);
+        props.onFlowChange?.(response);
+        emit("flowChange", response);
+        if (response?.flowStatus === EmbeddedFlowStatus.Complete) {
+          props.onComplete?.(response);
+          emit("complete", response);
+          return;
+        }
+        if (response?.flowStatus === EmbeddedFlowStatus.Incomplete) {
+          if (handleRedirectionIfNeeded(response)) return;
+          currentFlow.value = response;
+          setupFormFields(response);
+        }
+      } catch (err) {
+        handleError(err);
+        props.onError?.(err);
+        emit("error", err);
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    watch10(
+      () => [props.isInitialized, isFlowInitialized.value],
+      ([initialized, flowInit]) => {
+        if (!initialized || flowInit || initializationAttempted) return;
+        if (!props.onInitialize) return;
+        initializationAttempted = true;
+        (async () => {
+          isLoading.value = true;
+          clearMessages();
+          try {
+            const response = await props.onInitialize();
+            currentFlow.value = response;
+            isFlowInitialized.value = true;
+            props.onFlowChange?.(response);
+            emit("flowChange", response);
+            if (response?.flowStatus === EmbeddedFlowStatus.Complete) {
+              props.onComplete?.(response);
+              emit("complete", response);
+              return;
+            }
+            if (response?.flowStatus === EmbeddedFlowStatus.Incomplete) {
+              setupFormFields(response);
+            }
+          } catch (err) {
+            handleError(err);
+            props.onError?.(err);
+            emit("error", err);
+          } finally {
+            isLoading.value = false;
+          }
+        })();
+      },
+      { immediate: true }
+    );
+    return () => {
+      const containerClass = [
+        withVendorCSSClassPrefix19("signup"),
+        withVendorCSSClassPrefix19(`signup--${props.size}`),
+        withVendorCSSClassPrefix19(`signup--${props.variant}`),
+        props.className
+      ].filter(Boolean).join(" ");
+      if (slots["default"]) {
+        const renderProps = {
+          components: currentFlow.value?.data?.components || [],
+          errors: formErrors.value,
+          handleInputChange,
+          handleSubmit,
+          isLoading: isLoading.value,
+          isValid: isFormValid(),
+          messages: flowMessages.value || [],
+          subtitle: flowSubtitle.value || t("signup.subheading") || "",
+          title: flowTitle.value || t("signup.heading") || "",
+          touched: touchedFields.value,
+          values: formValues.value
+        };
+        return h48("div", { class: containerClass }, slots["default"](renderProps));
+      }
+      if (!isFlowInitialized.value && isLoading.value) {
+        return h48(
+          Card_default,
+          { class: containerClass, variant: props.variant },
+          () => h48("div", { style: "display:flex;justify-content:center;padding:2rem" }, h48(Spinner_default))
+        );
+      }
+      if (!currentFlow.value) {
+        return h48(
+          Card_default,
+          { class: containerClass, variant: props.variant },
+          () => h48(
+            Alert_default,
+            { variant: "error" },
+            () => t("errors.signup.flow.initialization.failure") || "Failed to initialize sign-up flow"
+          )
+        );
+      }
+      const components = currentFlow.value.data?.components || [];
+      const rendered = renderSignUpComponents2(
+        components,
+        formValues.value,
+        touchedFields.value,
+        formErrors.value,
+        isLoading.value,
+        isFormValid(),
+        handleInputChange,
+        handleSubmit,
+        {
+          buttonClassName: props.buttonClassName,
+          inputClassName: props.inputClassName,
+          size: props.size
+        }
+      );
+      const cardChildren = [];
+      if (props.showLogo) {
+        cardChildren.push(h48("div", { style: "display:flex;justify-content:center;margin-bottom:1rem" }, [h48(Logo_default)]));
+      }
+      if (props.showTitle || props.showSubtitle) {
+        const headerChildren = [];
+        if (props.showTitle) {
+          headerChildren.push(
+            h48(Typography_default, { variant: "h2" }, { default: () => flowTitle.value || t("signup.heading") || "Sign Up" })
+          );
+        }
+        if (props.showSubtitle) {
+          headerChildren.push(
+            h48(
+              Typography_default,
+              { variant: "body1" },
+              { default: () => flowSubtitle.value || t("signup.subheading") || "Create your account" }
+            )
+          );
+        }
+        cardChildren.push(h48("div", { style: "padding: 0 1rem 1rem" }, headerChildren));
+      }
+      if (flowMessages.value && flowMessages.value.length > 0) {
+        cardChildren.push(
+          h48(
+            "div",
+            { style: "padding: 0 1rem" },
+            flowMessages.value.map(
+              (msg, i) => h48(
+                Alert_default,
+                {
+                  class: props.messageClassName,
+                  key: msg.id || i,
+                  variant: msg.type?.toLowerCase() === "error" ? "error" : "info"
+                },
+                () => msg.message
+              )
+            )
+          )
+        );
+      }
+      cardChildren.push(
+        h48(
+          "form",
+          {
+            class: withVendorCSSClassPrefix19("signup__form"),
+            onSubmit: (e) => {
+              e.preventDefault();
+              handleSubmit({ config: { type: "submit" }, type: "BUTTON" });
+            },
+            style: "padding: 1rem;display:flex;flex-direction:column;gap:0.75rem"
+          },
+          rendered.length > 0 ? rendered : [
+            h48(
+              Alert_default,
+              { variant: "warning" },
+              () => t("errors.signup.components.not.available") || "No components available"
+            )
+          ]
+        )
+      );
+      return h48(Card_default, { class: containerClass, variant: props.variant }, () => cardChildren);
+    };
+  }
+});
+var BaseSignUp_default = BaseSignUp;
+
+// src/components/presentation/sign-up/v1/SignUp.ts
+var SignUp = defineComponent46({
+  name: "SignUpV1",
+  props: {
+    afterSignUpUrl: { default: void 0, type: String },
+    buttonClassName: { default: "", type: String },
+    className: { default: "", type: String },
+    errorClassName: { default: "", type: String },
+    inputClassName: { default: "", type: String },
+    messageClassName: { default: "", type: String },
+    onComplete: { default: void 0, type: Function },
+    onError: { default: void 0, type: Function },
+    shouldRedirectAfterSignUp: { default: true, type: Boolean },
+    showSubtitle: { default: true, type: Boolean },
+    showTitle: { default: true, type: Boolean },
+    size: { default: "medium", type: String },
+    variant: { default: "outlined", type: String }
+  },
+  setup(props, { slots }) {
+    const { signUp, isInitialized, applicationId } = useAsgardeo_default();
+    const handleInitialize = async (payload) => {
+      const applicationIdFromUrl = typeof window !== "undefined" ? new URL(window.location.href).searchParams.get("applicationId") : null;
+      const effectiveApplicationId = applicationId || applicationIdFromUrl || void 0;
+      const initialPayload = payload || {
+        flowType: EmbeddedFlowType2.Registration,
+        ...effectiveApplicationId && { applicationId: effectiveApplicationId }
+      };
+      return await signUp(initialPayload);
+    };
+    const handleOnSubmit = async (payload) => await signUp(payload);
+    const handleComplete = (response) => {
+      props.onComplete?.(response);
+      const oauthRedirectUrl = response?.redirectUrl;
+      if (props.shouldRedirectAfterSignUp && oauthRedirectUrl) {
+        if (typeof window !== "undefined") {
+          window.location.href = oauthRedirectUrl;
+        }
+        return;
+      }
+      if (props.shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType2.Redirection && props.afterSignUpUrl) {
+        if (typeof window !== "undefined") {
+          window.location.href = props.afterSignUpUrl;
+        }
+      }
+    };
+    return () => h49(
+      BaseSignUp_default,
+      {
+        afterSignUpUrl: props.afterSignUpUrl,
+        buttonClassName: props.buttonClassName,
+        className: props.className,
+        errorClassName: props.errorClassName,
+        inputClassName: props.inputClassName,
+        isInitialized: isInitialized?.value ?? false,
+        messageClassName: props.messageClassName,
+        onComplete: handleComplete,
+        onError: props.onError,
+        onInitialize: handleInitialize,
+        onSubmit: handleOnSubmit,
+        showSubtitle: props.showSubtitle,
+        showTitle: props.showTitle,
+        size: props.size,
+        variant: props.variant
+      },
+      slots["default"] ? { default: (renderProps) => slots["default"](renderProps) } : void 0
+    );
+  }
+});
+var SignUp_default = SignUp;
+
+// src/components/presentation/sign-up/v2/SignUp.ts
+import {
+  EmbeddedFlowResponseType as EmbeddedFlowResponseType4,
+  EmbeddedFlowType as EmbeddedFlowType3
+} from "@asgardeo/browser";
+import { defineComponent as defineComponent48, h as h51 } from "vue";
+
+// src/components/presentation/sign-up/v2/BaseSignUp.ts
+import {
+  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType4,
+  EmbeddedFlowResponseType as EmbeddedFlowResponseType3,
+  EmbeddedFlowStatus as EmbeddedFlowStatus2,
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix20
+} from "@asgardeo/browser";
+import {
+  defineComponent as defineComponent47,
+  h as h50,
+  ref as ref18,
+  watch as watch11
+} from "vue";
+
 // src/utils/v2/getAuthComponentHeadings.ts
 var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitle, defaultSubtitle) => {
   let heading = null;
@@ -8325,13 +8997,13 @@ var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitl
 };
 var getAuthComponentHeadings_default = getAuthComponentHeadings;
 
-// src/components/presentation/sign-up/BaseSignUp.ts
-var logger6 = createVueLogger("BaseSignUp");
+// src/components/presentation/sign-up/v2/BaseSignUp.ts
+var logger7 = createVueLogger("BaseSignUp");
 var extractFormFields2 = (components) => {
   const fields = [];
   const process = (comps) => {
     comps.forEach((c) => {
-      if (c.type === EmbeddedFlowComponentType2.TextInput || c.type === EmbeddedFlowComponentType2.PasswordInput || c.type === EmbeddedFlowComponentType2.EmailInput || c.type === EmbeddedFlowComponentType2.Select) {
+      if (c.type === EmbeddedFlowComponentType4.TextInput || c.type === EmbeddedFlowComponentType4.PasswordInput || c.type === EmbeddedFlowComponentType4.EmailInput || c.type === EmbeddedFlowComponentType4.Select) {
         const fieldName = c.ref || c.id;
         fields.push({ name: fieldName, required: c.required || false, type: c.type });
       }
@@ -8343,7 +9015,7 @@ var extractFormFields2 = (components) => {
   process(components);
   return fields;
 };
-var BaseSignUp = defineComponent45({
+var BaseSignUp2 = defineComponent47({
   emits: ["error", "complete", "flowChange"],
   name: "BaseSignUp",
   props: {
@@ -8383,22 +9055,22 @@ var BaseSignUp = defineComponent45({
   setup(props, { slots }) {
     const { meta: flowMetaRef } = useFlowMeta_default();
     const { t } = useI18n_default();
-    const isLoading = ref17(false);
-    const isFlowInitialized = ref17(false);
-    const currentFlow = ref17(null);
-    const apiError = ref17(null);
-    const flowMessages = ref17([]);
-    const passkeyState = ref17({
+    const isLoading = ref18(false);
+    const isFlowInitialized = ref18(false);
+    const currentFlow = ref18(null);
+    const apiError = ref18(null);
+    const flowMessages = ref18([]);
+    const passkeyState = ref18({
       actionId: null,
       creationOptions: null,
       error: null,
       flowId: null,
       isActive: false
     });
-    const formValues = ref17({});
-    const touchedFields = ref17({});
-    const formErrors = ref17({});
-    const isFormValid = ref17(true);
+    const formValues = ref18({});
+    const touchedFields = ref18({});
+    const formErrors = ref18({});
+    const isFormValid = ref18(true);
     let initializationAttempted = false;
     let passkeyProcessed = false;
     const handleError = (error) => {
@@ -8441,7 +9113,7 @@ var BaseSignUp = defineComponent45({
         if (field.required && (!value || value.trim() === "")) {
           errors[field.name] = t("validations.required.field.error") || "This field is required";
         }
-        if ((field.type === EmbeddedFlowComponentType2.EmailInput || field.type === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+        if ((field.type === EmbeddedFlowComponentType4.EmailInput || field.type === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
           errors[field.name] = t("field.email.invalid") || "Invalid email address";
         }
       });
@@ -8470,7 +9142,7 @@ var BaseSignUp = defineComponent45({
       touchedFields.value = { ...touchedFields.value, [name]: true };
     };
     const handleRedirectionIfNeeded = (response) => {
-      if (response?.type !== EmbeddedFlowResponseType.Redirection || !response?.data?.redirectURL) {
+      if (response?.type !== EmbeddedFlowResponseType3.Redirection || !response?.data?.redirectURL) {
         return false;
       }
       const redirectUrl = response.data.redirectURL;
@@ -8480,7 +9152,7 @@ var BaseSignUp = defineComponent45({
         "width=500,height=600,scrollbars=yes,resizable=yes"
       );
       if (!popup) {
-        logger6.error("Failed to open popup window");
+        logger7.error("Failed to open popup window");
         return false;
       }
       let hasProcessedCallback = false;
@@ -8500,9 +9172,9 @@ var BaseSignUp = defineComponent45({
         try {
           const continueResponse = await props.onSubmit(payload);
           props.onFlowChange?.(continueResponse);
-          if (continueResponse.flowStatus === EmbeddedFlowStatus.Complete) {
+          if (continueResponse.flowStatus === EmbeddedFlowStatus2.Complete) {
             props.onComplete?.(continueResponse);
-          } else if (continueResponse.flowStatus === EmbeddedFlowStatus.Incomplete) {
+          } else if (continueResponse.flowStatus === EmbeddedFlowStatus2.Incomplete) {
             currentFlow.value = continueResponse;
             setupFormFields(continueResponse);
           }
@@ -8541,7 +9213,7 @@ var BaseSignUp = defineComponent45({
               const state = url.searchParams.get("state");
               const error = url.searchParams.get("error");
               if (error) {
-                logger6.error("OAuth error");
+                logger7.error("OAuth error");
                 popup.close();
                 cleanup();
                 return;
@@ -8553,7 +9225,7 @@ var BaseSignUp = defineComponent45({
           } catch {
           }
         } catch {
-          logger6.error("Error monitoring popup");
+          logger7.error("Error monitoring popup");
         }
       }, 1e3);
       return true;
@@ -8585,11 +9257,11 @@ var BaseSignUp = defineComponent45({
         const rawResponse = await props.onSubmit(payload);
         const response = normalizeFlowResponseLocal(rawResponse);
         props.onFlowChange?.(response);
-        if (response.flowStatus === EmbeddedFlowStatus.Complete) {
+        if (response.flowStatus === EmbeddedFlowStatus2.Complete) {
           props.onComplete?.(response);
           return;
         }
-        if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
+        if (response.flowStatus === EmbeddedFlowStatus2.Incomplete) {
           if (handleRedirectionIfNeeded(response)) return;
           if (response.data?.additionalData?.["passkeyCreationOptions"]) {
             const { passkeyCreationOptions } = response.data.additionalData;
@@ -8615,7 +9287,7 @@ var BaseSignUp = defineComponent45({
         isLoading.value = false;
       }
     };
-    watch10(
+    watch11(
       () => passkeyState.value,
       async (state) => {
         if (!state.isActive || !state.creationOptions || !state.flowId) return;
@@ -8638,7 +9310,7 @@ var BaseSignUp = defineComponent45({
           const nextResponse = await props.onSubmit(payload);
           const processed = normalizeFlowResponseLocal(nextResponse);
           props.onFlowChange?.(processed);
-          if (processed.flowStatus === EmbeddedFlowStatus.Complete) {
+          if (processed.flowStatus === EmbeddedFlowStatus2.Complete) {
             props.onComplete?.(processed);
           } else {
             currentFlow.value = processed;
@@ -8653,7 +9325,7 @@ var BaseSignUp = defineComponent45({
       },
       { deep: true }
     );
-    watch10(
+    watch11(
       () => [props.isInitialized, isFlowInitialized.value],
       ([initialized, flowInit]) => {
         const urlParams = new URL(window.location.href).searchParams;
@@ -8670,11 +9342,11 @@ var BaseSignUp = defineComponent45({
               currentFlow.value = response;
               isFlowInitialized.value = true;
               props.onFlowChange?.(response);
-              if (response.flowStatus === EmbeddedFlowStatus.Complete) {
+              if (response.flowStatus === EmbeddedFlowStatus2.Complete) {
                 props.onComplete?.(response);
                 return;
               }
-              if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
+              if (response.flowStatus === EmbeddedFlowStatus2.Incomplete) {
                 setupFormFields(response);
               }
             } catch (err) {
@@ -8690,9 +9362,9 @@ var BaseSignUp = defineComponent45({
     );
     return () => {
       const containerClass = [
-        withVendorCSSClassPrefix19("signup"),
-        withVendorCSSClassPrefix19(`signup--${props.size}`),
-        withVendorCSSClassPrefix19(`signup--${props.variant}`),
+        withVendorCSSClassPrefix20("signup"),
+        withVendorCSSClassPrefix20(`signup--${props.size}`),
+        withVendorCSSClassPrefix20(`signup--${props.variant}`),
         props.className
       ].filter(Boolean).join(" ");
       if (slots["default"]) {
@@ -8714,20 +9386,20 @@ var BaseSignUp = defineComponent45({
           },
           values: formValues.value
         };
-        return h47("div", { class: containerClass }, slots["default"](renderProps));
+        return h50("div", { class: containerClass }, slots["default"](renderProps));
       }
       if (!isFlowInitialized.value && isLoading.value) {
-        return h47(
+        return h50(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h47("div", { style: "display:flex;justify-content:center;padding:2rem" }, h47(Spinner_default))
+          () => h50("div", { style: "display:flex;justify-content:center;padding:2rem" }, h50(Spinner_default))
         );
       }
       if (!currentFlow.value) {
-        return h47(
+        return h50(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h47(
+          () => h50(
             Alert_default,
             { variant: "error" },
             () => t("errors.signup.flow.initialization.failure") || "Failed to initialize sign-up flow"
@@ -8762,32 +9434,32 @@ var BaseSignUp = defineComponent45({
           variant: props.variant
         }
       ) : [];
-      return h47(Card_default, { class: containerClass, variant: props.variant }, () => [
+      return h50(Card_default, { class: containerClass, variant: props.variant }, () => [
         // Header with title/subtitle
-        props.showTitle || props.showSubtitle ? h47("div", { style: "padding: 1rem 1rem 0" }, [
-          props.showTitle ? h47(Typography_default, { variant: "h5" }, () => title) : null,
-          props.showSubtitle ? h47(Typography_default, { style: "margin-top: 0.25rem", variant: "body1" }, () => subtitle) : null
+        props.showTitle || props.showSubtitle ? h50("div", { style: "padding: 1rem 1rem 0" }, [
+          props.showTitle ? h50(Typography_default, { variant: "h5" }, () => title) : null,
+          props.showSubtitle ? h50(Typography_default, { style: "margin-top: 0.25rem", variant: "body1" }, () => subtitle) : null
         ]) : null,
         // External error
-        props.error ? h47(
+        props.error ? h50(
           "div",
           { style: "padding: 0 1rem" },
-          h47(Alert_default, { variant: "error" }, () => props.error.message)
+          h50(Alert_default, { variant: "error" }, () => props.error.message)
         ) : null,
         // Flow messages
-        flowMessages.value.length > 0 ? h47(
+        flowMessages.value.length > 0 ? h50(
           "div",
           { style: "padding: 0 1rem" },
           flowMessages.value.map(
-            (msg, i) => h47(Alert_default, { key: i, variant: msg.type === "error" ? "error" : "info" }, () => msg.message)
+            (msg, i) => h50(Alert_default, { key: i, variant: msg.type === "error" ? "error" : "info" }, () => msg.message)
           )
         ) : null,
         // Components
-        h47(
+        h50(
           "div",
           { style: "padding: 1rem" },
           renderedComponents.length > 0 ? renderedComponents : [
-            h47(
+            h50(
               Alert_default,
               { variant: "warning" },
               () => t("errors.signup.components.not.available") || "No components available"
@@ -8798,10 +9470,10 @@ var BaseSignUp = defineComponent45({
     };
   }
 });
-var BaseSignUp_default = BaseSignUp;
+var BaseSignUp_default2 = BaseSignUp2;
 
-// src/components/presentation/sign-up/SignUp.ts
-var SignUp = defineComponent46({
+// src/components/presentation/sign-up/v2/SignUp.ts
+var SignUp2 = defineComponent48({
   name: "SignUp",
   props: {
     afterSignUpUrl: { default: void 0, type: String },
@@ -8825,7 +9497,7 @@ var SignUp = defineComponent46({
       const applicationIdFromUrl = urlParams.get("applicationId");
       const effectiveApplicationId = applicationId || applicationIdFromUrl || void 0;
       const initialPayload = payload || {
-        flowType: EmbeddedFlowType2.Registration,
+        flowType: EmbeddedFlowType3.Registration,
         ...effectiveApplicationId && { applicationId: effectiveApplicationId }
       };
       return await signUp(initialPayload);
@@ -8838,15 +9510,15 @@ var SignUp = defineComponent46({
         window.location.href = oauthRedirectUrl;
         return;
       }
-      if (props.shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType2.Redirection && props.afterSignUpUrl) {
+      if (props.shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType4.Redirection && props.afterSignUpUrl) {
         window.location.href = props.afterSignUpUrl;
       }
-      if (props.shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType2.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && !response.data.redirectURL.includes("auth")) {
+      if (props.shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType4.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && !response.data.redirectURL.includes("auth")) {
         window.location.href = response.data.redirectURL;
       }
     };
-    return () => h48(
-      BaseSignUp_default,
+    return () => h51(
+      BaseSignUp_default2,
       {
         afterSignUpUrl: props.afterSignUpUrl,
         buttonClassName: props.buttonClassName,
@@ -8868,24 +9540,110 @@ var SignUp = defineComponent46({
     );
   }
 });
-var SignUp_default = SignUp;
+var SignUp_default2 = SignUp2;
+
+// src/components/presentation/sign-up/SignUp.ts
+var SignUp3 = defineComponent49({
+  inheritAttrs: false,
+  name: "SignUp",
+  setup(_props, { attrs, slots }) {
+    const { platform } = useAsgardeo_default();
+    return () => {
+      if (platform === Platform5.AsgardeoV2) {
+        return h52(SignUp_default2, { ...attrs }, slots);
+      }
+      return h52(SignUp_default, { ...attrs }, slots);
+    };
+  }
+});
+var SignUp_default3 = SignUp3;
+
+// src/components/presentation/sign-up/BaseSignUp.ts
+import { Platform as Platform6 } from "@asgardeo/browser";
+import { defineComponent as defineComponent50, h as h53 } from "vue";
+var BaseSignUp3 = defineComponent50({
+  inheritAttrs: false,
+  name: "BaseSignUp",
+  setup(_props, { attrs, slots }) {
+    const { platform } = useAsgardeo_default();
+    return () => {
+      if (platform === Platform6.AsgardeoV2) {
+        return h53(BaseSignUp_default2, { ...attrs }, slots);
+      }
+      return h53(BaseSignUp_default, { ...attrs }, slots);
+    };
+  }
+});
+var BaseSignUp_default3 = BaseSignUp3;
 
 // src/components/presentation/user-profile/UserProfile.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix21 } from "@asgardeo/browser";
-import { defineComponent as defineComponent48, h as h50 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22 } from "@asgardeo/browser";
+import { defineComponent as defineComponent52, h as h55 } from "vue";
 
 // src/components/presentation/user-profile/BaseUserProfile.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix20 } from "@asgardeo/browser";
-import { defineComponent as defineComponent47, h as h49, ref as ref18 } from "vue";
+import {
+  WellKnownSchemaIds,
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix21
+} from "@asgardeo/browser";
+import { defineComponent as defineComponent51, h as h54, ref as ref19 } from "vue";
 var PROFILE_FIELD_DESCRIPTORS = [
-  { keys: ["username", "userName", "user_name"], label: "Username", readonly: true },
-  { keys: ["firstName", "givenName"], label: "First Name", readonly: false },
-  { keys: ["lastName", "familyName"], label: "Last Name", readonly: false },
-  { keys: ["email", "emails"], label: "Email", readonly: false },
+  { keys: ["userName", "username"], label: "Username", readonly: true },
+  { keys: ["name.givenName", "firstName", "givenName"], label: "First Name", readonly: false },
+  { keys: ["name.familyName", "lastName", "familyName"], label: "Last Name", readonly: false },
+  { keys: ["emails", "email"], label: "Email", readonly: true },
   { keys: ["country"], label: "Country", readonly: false },
-  { keys: ["birthdate", "birthDate", "dateOfBirth"], label: "Birth Date", readonly: false },
-  { keys: ["mobile", "mobileNumber", "phoneNumbers"], label: "Mobile Numbers", readonly: false }
+  { keys: ["dateOfBirth", "birthdate", "birthDate"], label: "Birth Date", readonly: false },
+  { keys: ["phoneNumbers.mobile", "mobile", "mobileNumbers"], label: "Mobile", readonly: false }
 ];
+var CORE_USER_SCHEMA_ID = WellKnownSchemaIds.User;
+var setNestedPath = (target, segments, value) => {
+  let cursor = target;
+  for (let i = 0; i < segments.length - 1; i += 1) {
+    const segment = segments[i];
+    if (typeof cursor[segment] !== "object" || cursor[segment] === null) {
+      cursor[segment] = {};
+    }
+    cursor = cursor[segment];
+  }
+  cursor[segments[segments.length - 1]] = value;
+};
+var buildScimPatchValue = (flatKey, rawValue, schemas) => {
+  const list = schemas ?? [];
+  const entry = list.find((s) => s.name === flatKey);
+  if (flatKey === "phoneNumbers.mobile") {
+    return {
+      phoneNumbers: [{ type: "mobile", value: rawValue }],
+      [WellKnownSchemaIds.SystemUser]: { mobileNumbers: [rawValue] }
+    };
+  }
+  const complexMultiValued = /* @__PURE__ */ new Set([
+    "phoneNumbers",
+    "emails",
+    "ims",
+    "photos",
+    "addresses",
+    "entitlements",
+    "roles",
+    "x509Certificates"
+  ]);
+  const dotIndex = flatKey.indexOf(".");
+  if (dotIndex > 0) {
+    const head = flatKey.slice(0, dotIndex);
+    const tail = flatKey.slice(dotIndex + 1);
+    if (complexMultiValued.has(head)) {
+      return { [head]: [{ type: tail, value: rawValue }] };
+    }
+  }
+  const value = entry?.multiValued ? [rawValue] : rawValue;
+  const segments = flatKey.split(".");
+  const nested = {};
+  setNestedPath(nested, segments, value);
+  const schemaId = entry?.schemaId;
+  if (schemaId && schemaId !== CORE_USER_SCHEMA_ID) {
+    return { [schemaId]: nested };
+  }
+  return nested;
+};
 var AVATAR_GRADIENTS = [
   "linear-gradient(135deg, #a855f7 0%, #ec4899 100%)",
   "linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%)",
@@ -8913,7 +9671,7 @@ var getUserInitials = (user) => {
   const fallback = String(user["username"] || user["userName"] || user["email"] || user["sub"] || "");
   return fallback.charAt(0).toUpperCase() || "?";
 };
-var BaseUserProfile = defineComponent47({
+var BaseUserProfile = defineComponent51({
   inheritAttrs: false,
   name: "BaseUserProfile",
   props: {
@@ -8934,8 +9692,8 @@ var BaseUserProfile = defineComponent47({
     title: { default: "Profile", type: String }
   },
   setup(props, { slots }) {
-    const editingFields = ref18({});
-    const editedValues = ref18({});
+    const editingFields = ref19({});
+    const editedValues = ref19({});
     return () => {
       if (slots["default"]) {
         return slots["default"]({
@@ -8944,7 +9702,7 @@ var BaseUserProfile = defineComponent47({
           profile: props.flattenedProfile || props.profile
         });
       }
-      const prefix = withVendorCSSClassPrefix20;
+      const prefix = withVendorCSSClassPrefix21;
       const data = props.flattenedProfile || props.profile;
       const dataRecord = data;
       const initials = getUserInitials(dataRecord);
@@ -8954,28 +9712,28 @@ var BaseUserProfile = defineComponent47({
       const avatarGradient = getAvatarGradient(avatarSeed);
       const children = [];
       children.push(
-        h49("div", { class: prefix("user-profile__header") }, [
-          h49(Typography_default, { class: prefix("user-profile__title"), variant: "h5" }, () => props.title)
+        h54("div", { class: prefix("user-profile__header") }, [
+          h54(Typography_default, { class: prefix("user-profile__title"), variant: "h5" }, () => props.title)
         ])
       );
-      children.push(h49(Divider_default, { class: prefix("user-profile__header-divider") }));
+      children.push(h54(Divider_default, { class: prefix("user-profile__header-divider") }));
       children.push(
-        h49("div", { class: prefix("user-profile__avatar-section") }, [
-          h49(
+        h54("div", { class: prefix("user-profile__avatar-section") }, [
+          h54(
             "div",
             {
               class: prefix("user-profile__avatar"),
               style: { background: avatarGradient }
             },
-            [h49("span", { class: prefix("user-profile__avatar-initials") }, initials)]
+            [h54("span", { class: prefix("user-profile__avatar-initials") }, initials)]
           )
         ])
       );
       if (props.error) {
-        children.push(h49(Alert_default, { class: prefix("user-profile__error"), severity: "error" }, () => props.error));
+        children.push(h54(Alert_default, { class: prefix("user-profile__error"), severity: "error" }, () => props.error));
       }
       if (props.isLoading) {
-        children.push(h49("div", { class: prefix("user-profile__loading") }, [h49(Spinner_default)]));
+        children.push(h54("div", { class: prefix("user-profile__loading") }, [h54(Spinner_default)]));
       } else if (data) {
         const fieldDataRecord = data;
         const descriptors = PROFILE_FIELD_DESCRIPTORS.filter((d) => {
@@ -8995,28 +9753,28 @@ var BaseUserProfile = defineComponent47({
           const isEmpty2 = value == null || value === "";
           const { label } = descriptor;
           fieldRows.push(
-            h49("div", { class: prefix("user-profile__field"), key }, [
+            h54("div", { class: prefix("user-profile__field"), key }, [
               // Label column
-              h49("div", { class: prefix("user-profile__field-label-col") }, [
-                h49(Typography_default, { class: prefix("user-profile__field-label"), variant: "body2" }, () => label)
+              h54("div", { class: prefix("user-profile__field-label-col") }, [
+                h54(Typography_default, { class: prefix("user-profile__field-label"), variant: "body2" }, () => label)
               ]),
               // Value column
-              h49("div", { class: prefix("user-profile__field-value-col") }, [
-                isEditing ? h49("div", { class: prefix("user-profile__field-edit") }, [
-                  h49(TextField_default, {
+              h54("div", { class: prefix("user-profile__field-value-col") }, [
+                isEditing ? h54("div", { class: prefix("user-profile__field-edit") }, [
+                  h54(TextField_default, {
                     modelValue: editedValues.value[key] ?? String(value ?? ""),
                     "onUpdate:modelValue": (v) => {
                       editedValues.value = { ...editedValues.value, [key]: v };
                     }
                   }),
-                  h49("div", { class: prefix("user-profile__field-edit-actions") }, [
-                    h49(
+                  h54("div", { class: prefix("user-profile__field-edit-actions") }, [
+                    h54(
                       Button_default,
                       {
                         onClick: async () => {
                           if (props.onUpdate) {
                             await props.onUpdate({
-                              payload: { [key]: editedValues.value[key] }
+                              payload: buildScimPatchValue(key, editedValues.value[key] ?? "", props.schemas)
                             });
                           }
                           editingFields.value = { ...editingFields.value, [key]: false };
@@ -9026,7 +9784,7 @@ var BaseUserProfile = defineComponent47({
                       },
                       () => "Save"
                     ),
-                    h49(
+                    h54(
                       Button_default,
                       {
                         onClick: () => {
@@ -9038,8 +9796,8 @@ var BaseUserProfile = defineComponent47({
                       () => "Cancel"
                     )
                   ])
-                ]) : h49("div", { class: prefix("user-profile__field-display") }, [
-                  isEmpty2 ? h49(
+                ]) : h54("div", { class: prefix("user-profile__field-display") }, [
+                  isEmpty2 ? h54(
                     "span",
                     {
                       class: prefix("user-profile__field-placeholder"),
@@ -9049,12 +9807,12 @@ var BaseUserProfile = defineComponent47({
                       } : void 0
                     },
                     `Enter your ${label.toLowerCase()}`
-                  ) : h49(
+                  ) : h54(
                     Typography_default,
                     { class: prefix("user-profile__field-value"), variant: "body1" },
                     () => String(value)
                   ),
-                  props.editable && !isReadonly ? h49(
+                  props.editable && !isReadonly ? h54(
                     "button",
                     {
                       "aria-label": `Edit ${label}`,
@@ -9065,29 +9823,29 @@ var BaseUserProfile = defineComponent47({
                       },
                       type: "button"
                     },
-                    [h49(PencilIcon)]
+                    [h54(PencilIcon)]
                   ) : null
                 ])
               ])
             ])
           );
         });
-        children.push(h49("div", { class: prefix("user-profile__fields") }, fieldRows));
+        children.push(h54("div", { class: prefix("user-profile__fields") }, fieldRows));
       }
       if (slots["footer"]) {
-        children.push(h49("div", { class: prefix("user-profile__footer") }, slots["footer"]()));
+        children.push(h54("div", { class: prefix("user-profile__footer") }, slots["footer"]()));
       }
       if (props.cardLayout) {
-        return h49(Card_default, { class: [prefix("user-profile"), props.className].filter(Boolean).join(" ") }, () => children);
+        return h54(Card_default, { class: [prefix("user-profile"), props.className].filter(Boolean).join(" ") }, () => children);
       }
-      return h49("div", { class: [prefix("user-profile"), props.className].filter(Boolean).join(" ") }, children);
+      return h54("div", { class: [prefix("user-profile"), props.className].filter(Boolean).join(" ") }, children);
     };
   }
 });
 var BaseUserProfile_default = BaseUserProfile;
 
 // src/components/presentation/user-profile/UserProfile.ts
-var UserProfile3 = defineComponent48({
+var UserProfile3 = defineComponent52({
   name: "UserProfile",
   props: {
     cardLayout: { default: true, type: Boolean },
@@ -9099,11 +9857,11 @@ var UserProfile3 = defineComponent48({
   },
   setup(props, { slots }) {
     const { flattenedProfile, schemas, updateProfile } = useUser_default();
-    return () => h50(
+    return () => h55(
       BaseUserProfile_default,
       {
         cardLayout: props.cardLayout,
-        class: withVendorCSSClassPrefix21("user-profile--styled"),
+        class: withVendorCSSClassPrefix22("user-profile--styled"),
         className: props.className,
         editable: props.editable,
         flattenedProfile: flattenedProfile?.value,
@@ -9120,13 +9878,13 @@ var UserProfile3 = defineComponent48({
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/user-dropdown/UserDropdown.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23 } from "@asgardeo/browser";
-import { defineComponent as defineComponent50, h as h52, ref as ref20 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24 } from "@asgardeo/browser";
+import { defineComponent as defineComponent54, h as h57, ref as ref21 } from "vue";
 
 // src/components/presentation/user-dropdown/BaseUserDropdown.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22 } from "@asgardeo/browser";
-import { defineComponent as defineComponent49, h as h51, ref as ref19 } from "vue";
-var BaseUserDropdown = defineComponent49({
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23 } from "@asgardeo/browser";
+import { defineComponent as defineComponent53, h as h56, ref as ref20 } from "vue";
+var BaseUserDropdown = defineComponent53({
   inheritAttrs: false,
   name: "BaseUserDropdown",
   props: {
@@ -9139,8 +9897,8 @@ var BaseUserDropdown = defineComponent49({
     user: { default: null, type: Object }
   },
   setup(props, { slots }) {
-    const isOpen = ref19(false);
-    const prefix = withVendorCSSClassPrefix22;
+    const isOpen = ref20(false);
+    const prefix = withVendorCSSClassPrefix23;
     return () => {
       if (slots["default"]) {
         return slots["default"]({
@@ -9168,7 +9926,7 @@ var BaseUserDropdown = defineComponent49({
       const displayName = resolveDisplayName();
       const children = [];
       children.push(
-        h51(
+        h56(
           "button",
           {
             class: prefix("user-dropdown__trigger"),
@@ -9178,9 +9936,9 @@ var BaseUserDropdown = defineComponent49({
             type: "button"
           },
           [
-            h51("span", { class: prefix("user-dropdown__avatar") }, [h51(UserIcon, { size: 20 })]),
-            displayName ? h51(Typography_default, { class: prefix("user-dropdown__name"), variant: "body2" }, () => displayName) : null,
-            h51(ChevronDownIcon, { size: 16 })
+            h56("span", { class: prefix("user-dropdown__avatar") }, [h56(UserIcon, { size: 20 })]),
+            displayName ? h56(Typography_default, { class: prefix("user-dropdown__name"), variant: "body2" }, () => displayName) : null,
+            h56(ChevronDownIcon, { size: 16 })
           ]
         )
       );
@@ -9188,9 +9946,9 @@ var BaseUserDropdown = defineComponent49({
         const menuItems = [];
         if (props.onProfileClick) {
           menuItems.push(
-            h51("button", { class: prefix("user-dropdown__item"), onClick: props.onProfileClick, type: "button" }, [
-              h51(UserIcon, { size: 16 }),
-              h51("span", null, "Profile")
+            h56("button", { class: prefix("user-dropdown__item"), onClick: props.onProfileClick, type: "button" }, [
+              h56(UserIcon, { size: 16 }),
+              h56("span", null, "Profile")
             ])
           );
         }
@@ -9199,25 +9957,25 @@ var BaseUserDropdown = defineComponent49({
         }
         if (props.onSignOut) {
           menuItems.push(
-            h51("button", { class: prefix("user-dropdown__item"), onClick: props.onSignOut, type: "button" }, [
-              h51(LogOutIcon, { size: 16 }),
-              h51("span", null, "Sign Out")
+            h56("button", { class: prefix("user-dropdown__item"), onClick: props.onSignOut, type: "button" }, [
+              h56(LogOutIcon, { size: 16 }),
+              h56("span", null, "Sign Out")
             ])
           );
         }
-        children.push(h51("div", { class: prefix("user-dropdown__menu") }, menuItems));
+        children.push(h56("div", { class: prefix("user-dropdown__menu") }, menuItems));
       }
-      const container = h51(
+      const container = h56(
         "div",
         { class: [prefix("user-dropdown"), props.className].filter(Boolean).join(" ") },
         children
       );
       if (props.isProfileModalOpen) {
-        return h51("div", [
+        return h56("div", [
           container,
-          h51("div", { class: prefix("user-dropdown__modal-overlay") }, [
-            h51("div", { class: prefix("user-dropdown__modal-content") }, [
-              h51(
+          h56("div", { class: prefix("user-dropdown__modal-overlay") }, [
+            h56("div", { class: prefix("user-dropdown__modal-content") }, [
+              h56(
                 "button",
                 {
                   "aria-label": "Close profile modal",
@@ -9225,7 +9983,7 @@ var BaseUserDropdown = defineComponent49({
                   onClick: props.onProfileModalClose,
                   type: "button"
                 },
-                [h51(XIcon, { size: 24 })]
+                [h56(XIcon, { size: 24 })]
               ),
               props.profileContent
             ])
@@ -9239,7 +9997,7 @@ var BaseUserDropdown = defineComponent49({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/user-dropdown/UserDropdown.ts
-var UserDropdown = defineComponent50({
+var UserDropdown = defineComponent54({
   emits: ["profileClick"],
   name: "UserDropdown",
   props: {
@@ -9250,11 +10008,11 @@ var UserDropdown = defineComponent50({
   },
   setup(props, { slots, emit }) {
     const { user, signOut } = useAsgardeo_default();
-    const isProfileModalOpen = ref20(false);
-    return () => h52(
+    const isProfileModalOpen = ref21(false);
+    return () => h57(
       BaseUserDropdown_default,
       {
-        class: withVendorCSSClassPrefix23("user-dropdown--styled"),
+        class: withVendorCSSClassPrefix24("user-dropdown--styled"),
         className: props.className,
         isProfileModalOpen: isProfileModalOpen.value,
         onProfileClick: () => {
@@ -9267,7 +10025,7 @@ var UserDropdown = defineComponent50({
         onSignOut: () => {
           signOut();
         },
-        profileContent: isProfileModalOpen.value ? h52(UserProfile_default, {
+        profileContent: isProfileModalOpen.value ? h57(UserProfile_default, {
           cardLayout: false,
           editable: true
         }) : null,
@@ -9280,17 +10038,17 @@ var UserDropdown = defineComponent50({
 var UserDropdown_default = UserDropdown;
 
 // src/components/presentation/accept-invite/AcceptInvite.ts
-import { defineComponent as defineComponent52, h as h54 } from "vue";
+import { defineComponent as defineComponent56, h as h59 } from "vue";
 
 // src/components/presentation/accept-invite/BaseAcceptInvite.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24 } from "@asgardeo/browser";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25 } from "@asgardeo/browser";
 import {
-  defineComponent as defineComponent51,
-  h as h53,
-  ref as ref21,
-  watch as watch11
+  defineComponent as defineComponent55,
+  h as h58,
+  ref as ref22,
+  watch as watch12
 } from "vue";
-var BaseAcceptInvite = defineComponent51({
+var BaseAcceptInvite = defineComponent55({
   name: "BaseAcceptInvite",
   props: {
     className: { default: "", type: String },
@@ -9315,17 +10073,17 @@ var BaseAcceptInvite = defineComponent51({
   setup(props, { slots }) {
     const { meta: metaRef } = useFlowMeta_default();
     const { t } = useI18n_default();
-    const isLoading = ref21(false);
-    const isValidatingToken = ref21(true);
-    const isTokenInvalid = ref21(false);
-    const isComplete = ref21(false);
-    const currentFlow = ref21(null);
-    const apiError = ref21(null);
-    const completionTitle = ref21(void 0);
-    const formValues = ref21({});
-    const formErrors = ref21({});
-    const touchedFields = ref21({});
-    const isFormValid = ref21(true);
+    const isLoading = ref22(false);
+    const isValidatingToken = ref22(true);
+    const isTokenInvalid = ref22(false);
+    const isComplete = ref22(false);
+    const currentFlow = ref22(null);
+    const apiError = ref22(null);
+    const completionTitle = ref22(void 0);
+    const formValues = ref22({});
+    const formErrors = ref22({});
+    const touchedFields = ref22({});
+    const isFormValid = ref22(true);
     let tokenValidationAttempted = false;
     const handleError = (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.acceptInvite.errors.generic");
@@ -9347,8 +10105,8 @@ var BaseAcceptInvite = defineComponent51({
       }
     };
     useOAuthCallback({
-      currentFlowId: ref21(props.flowId ?? null),
-      isInitialized: ref21(true),
+      currentFlowId: ref22(props.flowId ?? null),
+      isInitialized: ref22(true),
       onComplete: () => {
         isComplete.value = true;
         isValidatingToken.value = false;
@@ -9465,7 +10223,7 @@ var BaseAcceptInvite = defineComponent51({
         isLoading.value = false;
       }
     };
-    watch11(
+    watch12(
       () => [props.flowId, props.inviteToken],
       ([flowId, inviteToken]) => {
         if (tokenValidationAttempted) return;
@@ -9516,7 +10274,7 @@ var BaseAcceptInvite = defineComponent51({
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     );
     return () => {
-      const containerClass = [withVendorCSSClassPrefix24("accept-invite"), props.className].filter(Boolean).join(" ");
+      const containerClass = [withVendorCSSClassPrefix25("accept-invite"), props.className].filter(Boolean).join(" ");
       const components = currentFlow.value?.data?.components || currentFlow.value?.data?.meta?.components || [];
       const { title, subtitle } = extractHeadings(components);
       const componentsWithoutHeadings = filterHeadings(components);
@@ -9544,44 +10302,44 @@ var BaseAcceptInvite = defineComponent51({
           touched: touchedFields.value,
           values: formValues.value
         };
-        return h53("div", { class: containerClass }, slots["default"](renderProps));
+        return h58("div", { class: containerClass }, slots["default"](renderProps));
       }
       if (isValidatingToken.value) {
-        return h53(
+        return h58(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h53("div", { style: "display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem" }, [
-            h53(Spinner_default),
-            h53(Typography_default, { variant: "body1" }, () => "Validating your invite link...")
+          () => h58("div", { style: "display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem" }, [
+            h58(Spinner_default),
+            h58(Typography_default, { variant: "body1" }, () => "Validating your invite link...")
           ])
         );
       }
       if (isTokenInvalid.value) {
-        return h53(Card_default, { class: containerClass, variant: props.variant }, () => [
-          h53("div", { style: "padding:1rem" }, [
-            h53(Typography_default, { variant: "h5" }, () => "Invalid Invite Link"),
-            h53(
+        return h58(Card_default, { class: containerClass, variant: props.variant }, () => [
+          h58("div", { style: "padding:1rem" }, [
+            h58(Typography_default, { variant: "h5" }, () => "Invalid Invite Link"),
+            h58(
               Alert_default,
               { style: "margin-top:1rem", variant: "error" },
               () => apiError.value?.message || "This invite link is invalid or has expired. Please contact your administrator for a new invite."
             ),
-            props.onGoToSignIn ? h53("div", { style: "display:flex;justify-content:center;margin-top:1.5rem" }, [
-              h53(Button_default, { onClick: props.onGoToSignIn, variant: "outline" }, () => "Go to Sign In")
+            props.onGoToSignIn ? h58("div", { style: "display:flex;justify-content:center;margin-top:1.5rem" }, [
+              h58(Button_default, { onClick: props.onGoToSignIn, variant: "outline" }, () => "Go to Sign In")
             ]) : null
           ])
         ]);
       }
       if (isComplete.value) {
-        return h53(Card_default, { class: containerClass, variant: props.variant }, () => [
-          h53("div", { style: "padding:1rem" }, [
-            h53(Typography_default, { variant: "h5" }, () => "Account Setup Complete!"),
-            h53(
+        return h58(Card_default, { class: containerClass, variant: props.variant }, () => [
+          h58("div", { style: "padding:1rem" }, [
+            h58(Typography_default, { variant: "h5" }, () => "Account Setup Complete!"),
+            h58(
               Alert_default,
               { style: "margin-top:1rem", variant: "success" },
               () => "Your account has been successfully set up. You can now sign in with your credentials."
             ),
-            props.onGoToSignIn ? h53("div", { style: "display:flex;justify-content:center;margin-top:1.5rem" }, [
-              h53(Button_default, { onClick: props.onGoToSignIn, variant: "solid" }, () => "Sign In")
+            props.onGoToSignIn ? h58("div", { style: "display:flex;justify-content:center;margin-top:1.5rem" }, [
+              h58(Button_default, { onClick: props.onGoToSignIn, variant: "solid" }, () => "Sign In")
             ]) : null
           ])
         ]);
@@ -9603,17 +10361,17 @@ var BaseAcceptInvite = defineComponent51({
           variant: props.variant
         }
       ) : [];
-      return h53(Card_default, { class: containerClass, variant: props.variant }, () => [
-        (props.showTitle || props.showSubtitle) && (title || subtitle) ? h53("div", { style: "padding:1rem 1rem 0" }, [
-          props.showTitle && title ? h53(Typography_default, { variant: "h5" }, () => title) : null,
-          props.showSubtitle && subtitle ? h53(Typography_default, { style: "margin-top:0.25rem", variant: "body1" }, () => subtitle) : null
+      return h58(Card_default, { class: containerClass, variant: props.variant }, () => [
+        (props.showTitle || props.showSubtitle) && (title || subtitle) ? h58("div", { style: "padding:1rem 1rem 0" }, [
+          props.showTitle && title ? h58(Typography_default, { variant: "h5" }, () => title) : null,
+          props.showSubtitle && subtitle ? h58(Typography_default, { style: "margin-top:0.25rem", variant: "body1" }, () => subtitle) : null
         ]) : null,
-        apiError.value ? h53(
+        apiError.value ? h58(
           "div",
           { style: "padding:0 1rem;margin-bottom:1rem" },
-          h53(Alert_default, { variant: "error" }, () => apiError.value.message)
+          h58(Alert_default, { variant: "error" }, () => apiError.value.message)
         ) : null,
-        h53(
+        h58(
           "div",
           { style: "padding:1rem" },
           (() => {
@@ -9621,18 +10379,18 @@ var BaseAcceptInvite = defineComponent51({
             if (renderedComponents.length > 0) {
               formContent.push(renderedComponents);
             } else if (!isLoading.value) {
-              formContent.push(h53(Alert_default, { variant: "warning" }, () => "No form components available"));
+              formContent.push(h58(Alert_default, { variant: "warning" }, () => "No form components available"));
             }
             if (isLoading.value) {
-              formContent.push(h53("div", { style: "display:flex;justify-content:center;padding:1rem" }, h53(Spinner_default)));
+              formContent.push(h58("div", { style: "display:flex;justify-content:center;padding:1rem" }, h58(Spinner_default)));
             }
             return formContent;
           })()
         ),
-        props.onGoToSignIn ? h53("div", { style: "margin-top:1.5rem;text-align:center;padding:0 1rem 1rem" }, [
-          h53(Typography_default, { variant: "body2" }, () => [
+        props.onGoToSignIn ? h58("div", { style: "margin-top:1.5rem;text-align:center;padding:0 1rem 1rem" }, [
+          h58(Typography_default, { variant: "body2" }, () => [
             "Already have an account? ",
-            h53(
+            h58(
               Button_default,
               { onClick: props.onGoToSignIn, style: "min-width:auto;padding:0", variant: "text" },
               () => "Sign In"
@@ -9654,7 +10412,7 @@ var getUrlParams = () => {
     inviteToken: params.get("inviteToken") || void 0
   };
 };
-var AcceptInvite = defineComponent52({
+var AcceptInvite = defineComponent56({
   name: "AcceptInvite",
   props: {
     baseUrl: { default: void 0, type: String },
@@ -9693,7 +10451,7 @@ var AcceptInvite = defineComponent52({
       }
       return response.json();
     };
-    return () => h54(
+    return () => h59(
       BaseAcceptInvite_default,
       {
         className: props.className,
@@ -9716,18 +10474,18 @@ var AcceptInvite = defineComponent52({
 var AcceptInvite_default = AcceptInvite;
 
 // src/components/presentation/invite-user/InviteUser.ts
-import { EmbeddedFlowType as EmbeddedFlowType4 } from "@asgardeo/browser";
-import { defineComponent as defineComponent54, h as h56 } from "vue";
+import { EmbeddedFlowType as EmbeddedFlowType5 } from "@asgardeo/browser";
+import { defineComponent as defineComponent58, h as h61 } from "vue";
 
 // src/components/presentation/invite-user/BaseInviteUser.ts
-import { EmbeddedFlowType as EmbeddedFlowType3, withVendorCSSClassPrefix as withVendorCSSClassPrefix25 } from "@asgardeo/browser";
+import { EmbeddedFlowType as EmbeddedFlowType4, withVendorCSSClassPrefix as withVendorCSSClassPrefix26 } from "@asgardeo/browser";
 import {
-  defineComponent as defineComponent53,
-  h as h55,
-  ref as ref22,
-  watch as watch12
+  defineComponent as defineComponent57,
+  h as h60,
+  ref as ref23,
+  watch as watch13
 } from "vue";
-var BaseInviteUser = defineComponent53({
+var BaseInviteUser = defineComponent57({
   name: "BaseInviteUser",
   props: {
     className: { default: "", type: String },
@@ -9757,17 +10515,17 @@ var BaseInviteUser = defineComponent53({
   setup(props, { slots }) {
     const { meta: metaRef } = useFlowMeta_default();
     const { t } = useI18n_default();
-    const isLoading = ref22(false);
-    const isFlowInitialized = ref22(false);
-    const currentFlow = ref22(null);
-    const apiError = ref22(null);
-    const formValues = ref22({});
-    const formErrors = ref22({});
-    const touchedFields = ref22({});
-    const isFormValid = ref22(true);
-    const inviteLink = ref22(void 0);
-    const inviteLinkCopied = ref22(false);
-    const emailSent = ref22(false);
+    const isLoading = ref23(false);
+    const isFlowInitialized = ref23(false);
+    const currentFlow = ref23(null);
+    const apiError = ref23(null);
+    const formValues = ref23({});
+    const formErrors = ref23({});
+    const touchedFields = ref23({});
+    const isFormValid = ref23(true);
+    const inviteLink = ref23(void 0);
+    const inviteLinkCopied = ref23(false);
+    const emailSent = ref23(false);
     let initializationAttempted = false;
     const handleError = (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.inviteUser.errors.generic");
@@ -9901,7 +10659,7 @@ var BaseInviteUser = defineComponent53({
       emailSent.value = false;
       initializationAttempted = false;
     };
-    watch12(
+    watch13(
       () => [props.isInitialized, isFlowInitialized.value],
       ([initialized, flowInit]) => {
         if (initialized && !flowInit && !initializationAttempted) {
@@ -9910,7 +10668,7 @@ var BaseInviteUser = defineComponent53({
             isLoading.value = true;
             apiError.value = null;
             try {
-              const payload = { flowType: EmbeddedFlowType3.UserOnboarding, verbose: true };
+              const payload = { flowType: EmbeddedFlowType4.UserOnboarding, verbose: true };
               const rawResponse = await props.onInitialize(payload);
               const response = normalizeFlowResponseLocal(rawResponse);
               currentFlow.value = response;
@@ -9944,7 +10702,7 @@ var BaseInviteUser = defineComponent53({
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     );
     return () => {
-      const containerClass = [withVendorCSSClassPrefix25("invite-user"), props.className].filter(Boolean).join(" ");
+      const containerClass = [withVendorCSSClassPrefix26("invite-user"), props.className].filter(Boolean).join(" ");
       const components = currentFlow.value?.data?.components || currentFlow.value?.data?.meta?.components || [];
       const { title, subtitle } = extractHeadings(components);
       const componentsWithoutHeadings = filterHeadings(components);
@@ -9974,56 +10732,56 @@ var BaseInviteUser = defineComponent53({
           touched: touchedFields.value,
           values: formValues.value
         };
-        return h55("div", { class: containerClass }, slots["default"](renderProps));
+        return h60("div", { class: containerClass }, slots["default"](renderProps));
       }
       if (!props.isInitialized || !isFlowInitialized.value && isLoading.value) {
-        return h55(
+        return h60(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h55("div", { style: "display:flex;justify-content:center;padding:2rem" }, h55(Spinner_default))
+          () => h60("div", { style: "display:flex;justify-content:center;padding:2rem" }, h60(Spinner_default))
         );
       }
       if (!currentFlow.value && apiError.value) {
-        return h55(
+        return h60(
           Card_default,
           { class: containerClass, variant: props.variant },
-          () => h55(Alert_default, { variant: "error" }, () => apiError.value.message)
+          () => h60(Alert_default, { variant: "error" }, () => apiError.value.message)
         );
       }
       if (isInviteGenerated && isEmailSent) {
-        return h55(Card_default, { class: containerClass, variant: props.variant }, () => [
-          h55("div", { style: "padding:1rem" }, [
-            h55(Typography_default, { variant: "h5" }, () => "Invite Email Sent!"),
-            h55(
+        return h60(Card_default, { class: containerClass, variant: props.variant }, () => [
+          h60("div", { style: "padding:1rem" }, [
+            h60(Typography_default, { variant: "h5" }, () => "Invite Email Sent!"),
+            h60(
               Alert_default,
               { style: "margin-top:1rem", variant: "success" },
               () => "An invitation email has been sent successfully. The user can complete their registration using the link in the email."
             ),
-            h55("div", { style: "display:flex;gap:0.5rem;margin-top:1.5rem" }, [
-              h55(Button_default, { onClick: resetFlow, variant: "outline" }, () => "Invite Another User")
+            h60("div", { style: "display:flex;gap:0.5rem;margin-top:1.5rem" }, [
+              h60(Button_default, { onClick: resetFlow, variant: "outline" }, () => "Invite Another User")
             ])
           ])
         ]);
       }
       if (isInviteGenerated && inviteLink.value) {
-        return h55(Card_default, { class: containerClass, variant: props.variant }, () => [
-          h55("div", { style: "padding:1rem" }, [
-            h55(Typography_default, { variant: "h5" }, () => "Invite Link Generated!"),
-            h55(
+        return h60(Card_default, { class: containerClass, variant: props.variant }, () => [
+          h60("div", { style: "padding:1rem" }, [
+            h60(Typography_default, { variant: "h5" }, () => "Invite Link Generated!"),
+            h60(
               Alert_default,
               { style: "margin-top:1rem", variant: "success" },
               () => "Share this link with the user to complete their registration."
             ),
-            h55("div", { style: "margin-top:1rem" }, [
-              h55(Typography_default, { style: "margin-bottom:0.5rem", variant: "body2" }, () => "Invite Link"),
-              h55(
+            h60("div", { style: "margin-top:1rem" }, [
+              h60(Typography_default, { style: "margin-bottom:0.5rem", variant: "body2" }, () => "Invite Link"),
+              h60(
                 "div",
                 {
                   style: "display:flex;align-items:center;gap:0.5rem;padding:0.75rem;background:var(--asgardeo-color-background-secondary,#f5f5f5);border-radius:4px;word-break:break-all"
                 },
                 [
-                  h55(Typography_default, { style: "flex:1", variant: "body2" }, () => inviteLink.value),
-                  h55(
+                  h60(Typography_default, { style: "flex:1", variant: "body2" }, () => inviteLink.value),
+                  h60(
                     Button_default,
                     { onClick: copyInviteLink, size: "small", variant: "outline" },
                     () => inviteLinkCopied.value ? "Copied!" : "Copy"
@@ -10031,8 +10789,8 @@ var BaseInviteUser = defineComponent53({
                 ]
               )
             ]),
-            h55("div", { style: "display:flex;gap:0.5rem;margin-top:1.5rem" }, [
-              h55(Button_default, { onClick: resetFlow, variant: "outline" }, () => "Invite Another User")
+            h60("div", { style: "display:flex;gap:0.5rem;margin-top:1.5rem" }, [
+              h60(Button_default, { onClick: resetFlow, variant: "outline" }, () => "Invite Another User")
             ])
           ])
         ]);
@@ -10054,17 +10812,17 @@ var BaseInviteUser = defineComponent53({
           variant: props.variant
         }
       ) : [];
-      return h55(Card_default, { class: containerClass, variant: props.variant }, () => [
-        (props.showTitle || props.showSubtitle) && (title || subtitle) ? h55("div", { style: "padding:1rem 1rem 0" }, [
-          props.showTitle && title ? h55(Typography_default, { variant: "h5" }, () => title) : null,
-          props.showSubtitle && subtitle ? h55(Typography_default, { style: "margin-top:0.25rem", variant: "body1" }, () => subtitle) : null
+      return h60(Card_default, { class: containerClass, variant: props.variant }, () => [
+        (props.showTitle || props.showSubtitle) && (title || subtitle) ? h60("div", { style: "padding:1rem 1rem 0" }, [
+          props.showTitle && title ? h60(Typography_default, { variant: "h5" }, () => title) : null,
+          props.showSubtitle && subtitle ? h60(Typography_default, { style: "margin-top:0.25rem", variant: "body1" }, () => subtitle) : null
         ]) : null,
-        apiError.value ? h55(
+        apiError.value ? h60(
           "div",
           { style: "padding:0 1rem;margin-bottom:1rem" },
-          h55(Alert_default, { variant: "error" }, () => apiError.value.message)
+          h60(Alert_default, { variant: "error" }, () => apiError.value.message)
         ) : null,
-        h55(
+        h60(
           "div",
           { style: "padding:1rem" },
           (() => {
@@ -10072,10 +10830,10 @@ var BaseInviteUser = defineComponent53({
             if (renderedComponents.length > 0) {
               formContent.push(renderedComponents);
             } else if (!isLoading.value) {
-              formContent.push(h55(Alert_default, { variant: "warning" }, () => "No form components available"));
+              formContent.push(h60(Alert_default, { variant: "warning" }, () => "No form components available"));
             }
             if (isLoading.value) {
-              formContent.push(h55("div", { style: "display:flex;justify-content:center;padding:1rem" }, h55(Spinner_default)));
+              formContent.push(h60("div", { style: "display:flex;justify-content:center;padding:1rem" }, h60(Spinner_default)));
             }
             return formContent;
           })()
@@ -10087,7 +10845,7 @@ var BaseInviteUser = defineComponent53({
 var BaseInviteUser_default = BaseInviteUser;
 
 // src/components/presentation/invite-user/InviteUser.ts
-var InviteUser = defineComponent54({
+var InviteUser = defineComponent58({
   name: "InviteUser",
   props: {
     className: { default: "", type: String },
@@ -10109,7 +10867,7 @@ var InviteUser = defineComponent54({
     const { http: http3, baseUrl, isInitialized } = useAsgardeo_default();
     const handleInitialize = async (payload) => {
       const response = await http3.request({
-        data: { ...payload, flowType: EmbeddedFlowType4.UserOnboarding, verbose: true },
+        data: { ...payload, flowType: EmbeddedFlowType5.UserOnboarding, verbose: true },
         headers: { Accept: "application/json", "Content-Type": "application/json" },
         method: "POST",
         url: `${baseUrl}/flow/execute`
@@ -10125,7 +10883,7 @@ var InviteUser = defineComponent54({
       });
       return response.data;
     };
-    return () => h56(
+    return () => h61(
       BaseInviteUser_default,
       {
         className: props.className,
@@ -10147,13 +10905,13 @@ var InviteUser = defineComponent54({
 var InviteUser_default = InviteUser;
 
 // src/components/presentation/organization-list/OrganizationList.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix27 } from "@asgardeo/browser";
-import { defineComponent as defineComponent56, h as h58 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix28 } from "@asgardeo/browser";
+import { defineComponent as defineComponent60, h as h63 } from "vue";
 
 // src/components/presentation/organization-list/BaseOrganizationList.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix26 } from "@asgardeo/browser";
-import { defineComponent as defineComponent55, h as h57 } from "vue";
-var BaseOrganizationList = defineComponent55({
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix27 } from "@asgardeo/browser";
+import { defineComponent as defineComponent59, h as h62 } from "vue";
+var BaseOrganizationList = defineComponent59({
   inheritAttrs: false,
   name: "BaseOrganizationList",
   props: {
@@ -10167,18 +10925,18 @@ var BaseOrganizationList = defineComponent55({
       if (slots["default"]) {
         return slots["default"]({ isLoading: props.isLoading, organizations: props.organizations });
       }
-      const prefix = withVendorCSSClassPrefix26;
+      const prefix = withVendorCSSClassPrefix27;
       const children = [];
       if (props.isLoading) {
-        children.push(h57("div", { class: prefix("organization-list__loading") }, [h57(Spinner_default)]));
+        children.push(h62("div", { class: prefix("organization-list__loading") }, [h62(Spinner_default)]));
       } else if (props.organizations.length === 0) {
         children.push(
-          h57(Typography_default, { class: prefix("organization-list__empty"), variant: "body2" }, () => "No organizations found")
+          h62(Typography_default, { class: prefix("organization-list__empty"), variant: "body2" }, () => "No organizations found")
         );
       } else {
         props.organizations.forEach((org) => {
           children.push(
-            h57(
+            h62(
               "button",
               {
                 class: prefix("organization-list__item"),
@@ -10186,19 +10944,19 @@ var BaseOrganizationList = defineComponent55({
                 onClick: () => props.onSelect?.(org),
                 type: "button"
               },
-              [h57(BuildingIcon, { size: 16 }), h57(Typography_default, { variant: "body1" }, () => org["name"] || org["id"])]
+              [h62(BuildingIcon, { size: 16 }), h62(Typography_default, { variant: "body1" }, () => org["name"] || org["id"])]
             )
           );
         });
       }
-      return h57("div", { class: [prefix("organization-list"), props.className].filter(Boolean).join(" ") }, children);
+      return h62("div", { class: [prefix("organization-list"), props.className].filter(Boolean).join(" ") }, children);
     };
   }
 });
 var BaseOrganizationList_default = BaseOrganizationList;
 
 // src/components/presentation/organization-list/OrganizationList.ts
-var OrganizationList = defineComponent56({
+var OrganizationList = defineComponent60({
   emits: ["select"],
   name: "OrganizationList",
   props: {
@@ -10213,10 +10971,10 @@ var OrganizationList = defineComponent56({
       emit("select", org);
       await switchOrganization(org);
     };
-    return () => h58(
+    return () => h63(
       BaseOrganizationList_default,
       {
-        class: withVendorCSSClassPrefix27("organization-list--styled"),
+        class: withVendorCSSClassPrefix28("organization-list--styled"),
         className: props.className,
         isLoading: isLoading.value,
         onSelect: handleSelect,
@@ -10229,12 +10987,12 @@ var OrganizationList = defineComponent56({
 var OrganizationList_default = OrganizationList;
 
 // src/components/presentation/organization-profile/OrganizationProfile.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix29 } from "@asgardeo/browser";
-import { defineComponent as defineComponent58, h as h60 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix30 } from "@asgardeo/browser";
+import { defineComponent as defineComponent62, h as h65 } from "vue";
 
 // src/components/presentation/organization-profile/BaseOrganizationProfile.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix28 } from "@asgardeo/browser";
-import { defineComponent as defineComponent57, h as h59, ref as ref23 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix29 } from "@asgardeo/browser";
+import { defineComponent as defineComponent61, h as h64, ref as ref24 } from "vue";
 var ORG_AVATAR_GRADIENTS = [
   "linear-gradient(135deg, #22d3ee 0%, #2dd4bf 100%)",
   "linear-gradient(135deg, #34d399 0%, #059669 100%)",
@@ -10266,7 +11024,7 @@ var formatDate = (dateStr) => {
     return dateStr;
   }
 };
-var BaseOrganizationProfile = defineComponent57({
+var BaseOrganizationProfile = defineComponent61({
   name: "BaseOrganizationProfile",
   props: {
     className: { default: "", type: String },
@@ -10279,10 +11037,10 @@ var BaseOrganizationProfile = defineComponent57({
     title: { default: "Organization Profile", type: String }
   },
   setup(props, { slots }) {
-    const editingName = ref23(false);
-    const editingDescription = ref23(false);
-    const editedName = ref23("");
-    const editedDescription = ref23("");
+    const editingName = ref24(false);
+    const editingDescription = ref24(false);
+    const editedName = ref24("");
+    const editedDescription = ref24("");
     return () => {
       if (slots["default"]) {
         return slots["default"]({ organization: props.organization });
@@ -10290,7 +11048,7 @@ var BaseOrganizationProfile = defineComponent57({
       if (!props.organization) {
         return slots["fallback"]?.() ?? null;
       }
-      const prefix = withVendorCSSClassPrefix28;
+      const prefix = withVendorCSSClassPrefix29;
       const org = props.organization;
       const orgName = String(org["name"] || org["displayName"] || "");
       const orgHandle = String(org["orgHandle"] || "");
@@ -10302,43 +11060,43 @@ var BaseOrganizationProfile = defineComponent57({
       const avatarGradient = getOrgAvatarGradient(orgId || orgName);
       const children = [];
       children.push(
-        h59("div", { class: prefix("organization-profile__header") }, [
-          h59(Typography_default, { class: prefix("organization-profile__title"), variant: "h5" }, () => props.title)
+        h64("div", { class: prefix("organization-profile__header") }, [
+          h64(Typography_default, { class: prefix("organization-profile__title"), variant: "h5" }, () => props.title)
         ])
       );
-      children.push(h59(Divider_default, { class: prefix("organization-profile__header-divider") }));
+      children.push(h64(Divider_default, { class: prefix("organization-profile__header-divider") }));
       children.push(
-        h59("div", { class: prefix("organization-profile__identity") }, [
-          h59(
+        h64("div", { class: prefix("organization-profile__identity") }, [
+          h64(
             "div",
             {
               class: prefix("organization-profile__avatar"),
               style: { background: avatarGradient }
             },
-            [h59("span", { class: prefix("organization-profile__avatar-initials") }, initials)]
+            [h64("span", { class: prefix("organization-profile__avatar-initials") }, initials)]
           ),
-          h59(Typography_default, { class: prefix("organization-profile__org-name"), variant: "h5" }, () => orgName),
-          orgHandle ? h59(
+          h64(Typography_default, { class: prefix("organization-profile__org-name"), variant: "h5" }, () => orgName),
+          orgHandle ? h64(
             Typography_default,
             { class: prefix("organization-profile__org-handle"), variant: "body2" },
             () => `@${orgHandle}`
           ) : null
         ])
       );
-      children.push(h59(Divider_default, { class: prefix("organization-profile__identity-divider") }));
+      children.push(h64(Divider_default, { class: prefix("organization-profile__identity-divider") }));
       const fieldRows = [];
       fieldRows.push(
-        h59("div", { class: prefix("organization-profile__field"), key: "id" }, [
-          h59("div", { class: prefix("organization-profile__field-label-col") }, [
-            h59(
+        h64("div", { class: prefix("organization-profile__field"), key: "id" }, [
+          h64("div", { class: prefix("organization-profile__field-label-col") }, [
+            h64(
               Typography_default,
               { class: prefix("organization-profile__field-label"), variant: "body2" },
               () => "Organization ID"
             )
           ]),
-          h59("div", { class: prefix("organization-profile__field-value-col") }, [
-            h59("div", { class: prefix("organization-profile__field-display") }, [
-              orgId ? h59(
+          h64("div", { class: prefix("organization-profile__field-value-col") }, [
+            h64("div", { class: prefix("organization-profile__field-display") }, [
+              orgId ? h64(
                 Typography_default,
                 {
                   class: [
@@ -10348,30 +11106,30 @@ var BaseOrganizationProfile = defineComponent57({
                   variant: "body1"
                 },
                 () => orgId
-              ) : h59("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
+              ) : h64("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
             ])
           ])
         ])
       );
       fieldRows.push(
-        h59("div", { class: prefix("organization-profile__field"), key: "name" }, [
-          h59("div", { class: prefix("organization-profile__field-label-col") }, [
-            h59(
+        h64("div", { class: prefix("organization-profile__field"), key: "name" }, [
+          h64("div", { class: prefix("organization-profile__field-label-col") }, [
+            h64(
               Typography_default,
               { class: prefix("organization-profile__field-label"), variant: "body2" },
               () => "Organization Name"
             )
           ]),
-          h59("div", { class: prefix("organization-profile__field-value-col") }, [
-            editingName.value ? h59("div", { class: prefix("organization-profile__field-edit") }, [
-              h59(TextField_default, {
+          h64("div", { class: prefix("organization-profile__field-value-col") }, [
+            editingName.value ? h64("div", { class: prefix("organization-profile__field-edit") }, [
+              h64(TextField_default, {
                 modelValue: editedName.value,
                 "onUpdate:modelValue": (v) => {
                   editedName.value = v;
                 }
               }),
-              h59("div", { class: prefix("organization-profile__field-edit-actions") }, [
-                h59(
+              h64("div", { class: prefix("organization-profile__field-edit-actions") }, [
+                h64(
                   Button_default,
                   {
                     onClick: async () => {
@@ -10383,7 +11141,7 @@ var BaseOrganizationProfile = defineComponent57({
                   },
                   () => "Save"
                 ),
-                h59(
+                h64(
                   Button_default,
                   {
                     onClick: () => {
@@ -10395,9 +11153,9 @@ var BaseOrganizationProfile = defineComponent57({
                   () => "Cancel"
                 )
               ])
-            ]) : h59("div", { class: prefix("organization-profile__field-display") }, [
-              h59(Typography_default, { class: prefix("organization-profile__field-value"), variant: "body1" }, () => orgName),
-              props.editable ? h59(
+            ]) : h64("div", { class: prefix("organization-profile__field-display") }, [
+              h64(Typography_default, { class: prefix("organization-profile__field-value"), variant: "body1" }, () => orgName),
+              props.editable ? h64(
                 "button",
                 {
                   "aria-label": "Edit Organization Name",
@@ -10408,31 +11166,31 @@ var BaseOrganizationProfile = defineComponent57({
                   },
                   type: "button"
                 },
-                [h59(PencilIcon)]
+                [h64(PencilIcon)]
               ) : null
             ])
           ])
         ])
       );
       fieldRows.push(
-        h59("div", { class: prefix("organization-profile__field"), key: "description" }, [
-          h59("div", { class: prefix("organization-profile__field-label-col") }, [
-            h59(
+        h64("div", { class: prefix("organization-profile__field"), key: "description" }, [
+          h64("div", { class: prefix("organization-profile__field-label-col") }, [
+            h64(
               Typography_default,
               { class: prefix("organization-profile__field-label"), variant: "body2" },
               () => "Organization Description"
             )
           ]),
-          h59("div", { class: prefix("organization-profile__field-value-col") }, [
-            editingDescription.value ? h59("div", { class: prefix("organization-profile__field-edit") }, [
-              h59(TextField_default, {
+          h64("div", { class: prefix("organization-profile__field-value-col") }, [
+            editingDescription.value ? h64("div", { class: prefix("organization-profile__field-edit") }, [
+              h64(TextField_default, {
                 modelValue: editedDescription.value,
                 "onUpdate:modelValue": (v) => {
                   editedDescription.value = v;
                 }
               }),
-              h59("div", { class: prefix("organization-profile__field-edit-actions") }, [
-                h59(
+              h64("div", { class: prefix("organization-profile__field-edit-actions") }, [
+                h64(
                   Button_default,
                   {
                     onClick: async () => {
@@ -10444,7 +11202,7 @@ var BaseOrganizationProfile = defineComponent57({
                   },
                   () => "Save"
                 ),
-                h59(
+                h64(
                   Button_default,
                   {
                     onClick: () => {
@@ -10456,12 +11214,12 @@ var BaseOrganizationProfile = defineComponent57({
                   () => "Cancel"
                 )
               ])
-            ]) : h59("div", { class: prefix("organization-profile__field-display") }, [
-              orgDescription != null ? h59(
+            ]) : h64("div", { class: prefix("organization-profile__field-display") }, [
+              orgDescription != null ? h64(
                 Typography_default,
                 { class: prefix("organization-profile__field-value"), variant: "body1" },
                 () => orgDescription
-              ) : h59(
+              ) : h64(
                 "span",
                 {
                   class: prefix("organization-profile__field-placeholder"),
@@ -10472,7 +11230,7 @@ var BaseOrganizationProfile = defineComponent57({
                 },
                 "Enter organization description"
               ),
-              props.editable ? h59(
+              props.editable ? h64(
                 "button",
                 {
                   "aria-label": "Edit Organization Description",
@@ -10483,66 +11241,66 @@ var BaseOrganizationProfile = defineComponent57({
                   },
                   type: "button"
                 },
-                [h59(PencilIcon)]
+                [h64(PencilIcon)]
               ) : null
             ])
           ])
         ])
       );
       fieldRows.push(
-        h59("div", { class: prefix("organization-profile__field"), key: "created" }, [
-          h59("div", { class: prefix("organization-profile__field-label-col") }, [
-            h59(Typography_default, { class: prefix("organization-profile__field-label"), variant: "body2" }, () => "Created Date")
+        h64("div", { class: prefix("organization-profile__field"), key: "created" }, [
+          h64("div", { class: prefix("organization-profile__field-label-col") }, [
+            h64(Typography_default, { class: prefix("organization-profile__field-label"), variant: "body2" }, () => "Created Date")
           ]),
-          h59("div", { class: prefix("organization-profile__field-value-col") }, [
-            h59("div", { class: prefix("organization-profile__field-display") }, [
-              createdDate ? h59(
+          h64("div", { class: prefix("organization-profile__field-value-col") }, [
+            h64("div", { class: prefix("organization-profile__field-display") }, [
+              createdDate ? h64(
                 Typography_default,
                 { class: prefix("organization-profile__field-value"), variant: "body1" },
                 () => createdDate
-              ) : h59("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
+              ) : h64("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
             ])
           ])
         ])
       );
       fieldRows.push(
-        h59("div", { class: prefix("organization-profile__field"), key: "lastModified" }, [
-          h59("div", { class: prefix("organization-profile__field-label-col") }, [
-            h59(
+        h64("div", { class: prefix("organization-profile__field"), key: "lastModified" }, [
+          h64("div", { class: prefix("organization-profile__field-label-col") }, [
+            h64(
               Typography_default,
               { class: prefix("organization-profile__field-label"), variant: "body2" },
               () => "Last Modified Date"
             )
           ]),
-          h59("div", { class: prefix("organization-profile__field-value-col") }, [
-            h59("div", { class: prefix("organization-profile__field-display") }, [
-              lastModifiedDate ? h59(
+          h64("div", { class: prefix("organization-profile__field-value-col") }, [
+            h64("div", { class: prefix("organization-profile__field-display") }, [
+              lastModifiedDate ? h64(
                 Typography_default,
                 { class: prefix("organization-profile__field-value"), variant: "body1" },
                 () => lastModifiedDate
-              ) : h59("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
+              ) : h64("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
             ])
           ])
         ])
       );
       fieldRows.push(
-        h59("div", { class: prefix("organization-profile__field"), key: "orgHandle" }, [
-          h59("div", { class: prefix("organization-profile__field-label-col") }, [
-            h59(
+        h64("div", { class: prefix("organization-profile__field"), key: "orgHandle" }, [
+          h64("div", { class: prefix("organization-profile__field-label-col") }, [
+            h64(
               Typography_default,
               { class: prefix("organization-profile__field-label"), variant: "body2" },
               () => "Organization Handle"
             )
           ]),
-          h59("div", { class: prefix("organization-profile__field-value-col") }, [
-            h59("div", { class: prefix("organization-profile__field-display") }, [
-              orgHandle ? h59(Typography_default, { class: prefix("organization-profile__field-value"), variant: "body1" }, () => orgHandle) : h59("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
+          h64("div", { class: prefix("organization-profile__field-value-col") }, [
+            h64("div", { class: prefix("organization-profile__field-display") }, [
+              orgHandle ? h64(Typography_default, { class: prefix("organization-profile__field-value"), variant: "body1" }, () => orgHandle) : h64("span", { class: prefix("organization-profile__field-placeholder") }, "Not available")
             ])
           ])
         ])
       );
-      children.push(h59("div", { class: prefix("organization-profile__fields") }, fieldRows));
-      return h59(
+      children.push(h64("div", { class: prefix("organization-profile__fields") }, fieldRows));
+      return h64(
         Card_default,
         { class: [prefix("organization-profile"), props.className].filter(Boolean).join(" ") },
         () => children
@@ -10553,7 +11311,7 @@ var BaseOrganizationProfile = defineComponent57({
 var BaseOrganizationProfile_default = BaseOrganizationProfile;
 
 // src/components/presentation/organization-profile/OrganizationProfile.ts
-var OrganizationProfile = defineComponent58({
+var OrganizationProfile = defineComponent62({
   name: "OrganizationProfile",
   props: {
     className: { default: "", type: String },
@@ -10566,10 +11324,10 @@ var OrganizationProfile = defineComponent58({
   },
   setup(props, { slots }) {
     const { currentOrganization } = useOrganization_default();
-    return () => h60(
+    return () => h65(
       BaseOrganizationProfile_default,
       {
-        class: withVendorCSSClassPrefix29("organization-profile--styled"),
+        class: withVendorCSSClassPrefix30("organization-profile--styled"),
         className: props.className,
         editable: props.editable,
         onUpdate: props.onUpdate,
@@ -10583,14 +11341,14 @@ var OrganizationProfile = defineComponent58({
 var OrganizationProfile_default = OrganizationProfile;
 
 // src/components/presentation/organization-switcher/OrganizationSwitcher.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix31 } from "@asgardeo/browser";
-import { defineComponent as defineComponent60, h as h62 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix32 } from "@asgardeo/browser";
+import { defineComponent as defineComponent64, h as h67 } from "vue";
 
 // src/components/presentation/organization-switcher/BaseOrganizationSwitcher.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix30 } from "@asgardeo/browser";
-import { defineComponent as defineComponent59, h as h61, ref as ref24 } from "vue";
-var cls = (name) => withVendorCSSClassPrefix30(`organization-switcher${name}`);
-var BaseOrganizationSwitcher = defineComponent59({
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix31 } from "@asgardeo/browser";
+import { defineComponent as defineComponent63, h as h66, ref as ref25 } from "vue";
+var cls = (name) => withVendorCSSClassPrefix31(`organization-switcher${name}`);
+var BaseOrganizationSwitcher = defineComponent63({
   inheritAttrs: false,
   name: "BaseOrganizationSwitcher",
   props: {
@@ -10601,7 +11359,7 @@ var BaseOrganizationSwitcher = defineComponent59({
     organizations: { default: () => [], type: Array }
   },
   setup(props, { slots }) {
-    const isOpen = ref24(false);
+    const isOpen = ref25(false);
     const toggle = () => {
       isOpen.value = !isOpen.value;
     };
@@ -10621,7 +11379,7 @@ var BaseOrganizationSwitcher = defineComponent59({
         });
       }
       const currentName = props.currentOrganization?.name ?? "No Organization";
-      const triggerButton = h61(
+      const triggerButton = h66(
         "button",
         {
           "aria-expanded": isOpen.value,
@@ -10631,23 +11389,23 @@ var BaseOrganizationSwitcher = defineComponent59({
           type: "button"
         },
         [
-          h61(BuildingIcon, { size: 16 }),
-          h61(Typography_default, { class: cls("__trigger-label"), variant: "body2" }, () => currentName),
-          h61(ChevronDownIcon, { size: 12 })
+          h66(BuildingIcon, { size: 16 }),
+          h66(Typography_default, { class: cls("__trigger-label"), variant: "body2" }, () => currentName),
+          h66(ChevronDownIcon, { size: 12 })
         ]
       );
       const dropdownChildren = [];
       if (props.isLoading) {
-        dropdownChildren.push(h61("div", { class: cls("__loading") }, [h61(Spinner_default, { size: "small" })]));
+        dropdownChildren.push(h66("div", { class: cls("__loading") }, [h66(Spinner_default, { size: "small" })]));
       } else if (props.organizations.length === 0) {
         dropdownChildren.push(
-          h61(Typography_default, { class: cls("__empty"), variant: "body2" }, () => "No organizations available")
+          h66(Typography_default, { class: cls("__empty"), variant: "body2" }, () => "No organizations available")
         );
       } else {
         props.organizations.forEach((org) => {
           const isActive = org["id"] === props.currentOrganization?.id;
           dropdownChildren.push(
-            h61(
+            h66(
               "button",
               {
                 "aria-selected": isActive,
@@ -10656,30 +11414,30 @@ var BaseOrganizationSwitcher = defineComponent59({
                 role: "option",
                 type: "button"
               },
-              [h61(BuildingIcon, { size: 14 }), h61(Typography_default, { variant: "body2" }, () => org["name"])]
+              [h66(BuildingIcon, { size: 14 }), h66(Typography_default, { variant: "body2" }, () => org["name"])]
             )
           );
         });
       }
-      const dropdown = isOpen.value ? h61("div", { class: cls("__dropdown"), role: "listbox" }, dropdownChildren) : null;
-      return h61(Card_default, { class: [cls(""), props.className].filter(Boolean).join(" ") }, () => [triggerButton, dropdown]);
+      const dropdown = isOpen.value ? h66("div", { class: cls("__dropdown"), role: "listbox" }, dropdownChildren) : null;
+      return h66(Card_default, { class: [cls(""), props.className].filter(Boolean).join(" ") }, () => [triggerButton, dropdown]);
     };
   }
 });
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/organization-switcher/OrganizationSwitcher.ts
-var OrganizationSwitcher = defineComponent60({
+var OrganizationSwitcher = defineComponent64({
   name: "OrganizationSwitcher",
   props: {
     className: { default: "", type: String }
   },
   setup(props, { slots }) {
     const { currentOrganization, myOrganizations, isLoading, switchOrganization } = useOrganization_default();
-    return () => h62(
+    return () => h67(
       BaseOrganizationSwitcher_default,
       {
-        class: withVendorCSSClassPrefix31("organization-switcher--styled"),
+        class: withVendorCSSClassPrefix32("organization-switcher--styled"),
         className: props.className,
         currentOrganization: currentOrganization?.value ?? null,
         isLoading: isLoading?.value ?? false,
@@ -10693,14 +11451,14 @@ var OrganizationSwitcher = defineComponent60({
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/components/presentation/create-organization/CreateOrganization.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix33 } from "@asgardeo/browser";
-import { defineComponent as defineComponent62, h as h64 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix34 } from "@asgardeo/browser";
+import { defineComponent as defineComponent66, h as h69 } from "vue";
 
 // src/components/presentation/create-organization/BaseCreateOrganization.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix32 } from "@asgardeo/browser";
-import { defineComponent as defineComponent61, h as h63, ref as ref25 } from "vue";
-var cls2 = (name) => withVendorCSSClassPrefix32(`create-organization${name}`);
-var BaseCreateOrganization = defineComponent61({
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix33 } from "@asgardeo/browser";
+import { defineComponent as defineComponent65, h as h68, ref as ref26 } from "vue";
+var cls2 = (name) => withVendorCSSClassPrefix33(`create-organization${name}`);
+var BaseCreateOrganization = defineComponent65({
   name: "BaseCreateOrganization",
   props: {
     className: { default: "", type: String },
@@ -10709,9 +11467,9 @@ var BaseCreateOrganization = defineComponent61({
     title: { default: "Create Organization", type: String }
   },
   setup(props, { slots }) {
-    const orgName = ref25("");
-    const isSubmitting = ref25(false);
-    const error = ref25(null);
+    const orgName = ref26("");
+    const isSubmitting = ref26(false);
+    const error = ref26(null);
     const handleSubmit = async () => {
       const name = orgName.value.trim();
       if (!name) {
@@ -10741,11 +11499,11 @@ var BaseCreateOrganization = defineComponent61({
           }
         });
       }
-      return h63(Card_default, { class: [cls2(""), props.className].filter(Boolean).join(" ") }, () => [
-        h63(Typography_default, { class: cls2("__title"), variant: "h6" }, () => props.title),
-        props.description ? h63(Typography_default, { class: cls2("__description"), variant: "body2" }, () => props.description) : null,
-        error.value ? h63(Alert_default, { class: cls2("__error"), severity: "error" }, () => error.value) : null,
-        h63(TextField_default, {
+      return h68(Card_default, { class: [cls2(""), props.className].filter(Boolean).join(" ") }, () => [
+        h68(Typography_default, { class: cls2("__title"), variant: "h6" }, () => props.title),
+        props.description ? h68(Typography_default, { class: cls2("__description"), variant: "body2" }, () => props.description) : null,
+        error.value ? h68(Alert_default, { class: cls2("__error"), severity: "error" }, () => error.value) : null,
+        h68(TextField_default, {
           class: cls2("__input"),
           label: "Organization Name",
           modelValue: orgName.value,
@@ -10754,7 +11512,7 @@ var BaseCreateOrganization = defineComponent61({
           },
           placeholder: "Enter organization name"
         }),
-        h63(
+        h68(
           Button_default,
           {
             class: cls2("__submit"),
@@ -10773,7 +11531,7 @@ var BaseCreateOrganization = defineComponent61({
 var BaseCreateOrganization_default = BaseCreateOrganization;
 
 // src/components/presentation/create-organization/CreateOrganization.ts
-var CreateOrganization = defineComponent62({
+var CreateOrganization = defineComponent66({
   name: "CreateOrganization",
   props: {
     className: { default: "", type: String },
@@ -10782,10 +11540,10 @@ var CreateOrganization = defineComponent62({
   },
   setup(props, { slots }) {
     const { createOrganization } = useOrganization_default();
-    return () => h64(
+    return () => h69(
       BaseCreateOrganization_default,
       {
-        class: withVendorCSSClassPrefix33("create-organization--styled"),
+        class: withVendorCSSClassPrefix34("create-organization--styled"),
         className: props.className,
         description: props.description,
         onCreate: createOrganization ? async (name) => {
@@ -10800,14 +11558,14 @@ var CreateOrganization = defineComponent62({
 var CreateOrganization_default = CreateOrganization;
 
 // src/components/presentation/language-switcher/LanguageSwitcher.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix35 } from "@asgardeo/browser";
-import { defineComponent as defineComponent64, h as h66 } from "vue";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix36 } from "@asgardeo/browser";
+import { defineComponent as defineComponent68, h as h71 } from "vue";
 
 // src/components/presentation/language-switcher/BaseLanguageSwitcher.ts
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix34 } from "@asgardeo/browser";
-import { defineComponent as defineComponent63, h as h65, ref as ref26 } from "vue";
-var cls3 = (name) => withVendorCSSClassPrefix34(`language-switcher${name}`);
-var BaseLanguageSwitcher = defineComponent63({
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix35 } from "@asgardeo/browser";
+import { defineComponent as defineComponent67, h as h70, ref as ref27 } from "vue";
+var cls3 = (name) => withVendorCSSClassPrefix35(`language-switcher${name}`);
+var BaseLanguageSwitcher = defineComponent67({
   name: "BaseLanguageSwitcher",
   props: {
     className: { default: "", type: String },
@@ -10816,7 +11574,7 @@ var BaseLanguageSwitcher = defineComponent63({
     onLanguageChange: { default: void 0, type: Function }
   },
   setup(props, { slots }) {
-    const isOpen = ref26(false);
+    const isOpen = ref27(false);
     const toggle = () => {
       isOpen.value = !isOpen.value;
     };
@@ -10835,7 +11593,7 @@ var BaseLanguageSwitcher = defineComponent63({
         });
       }
       const currentLabel = props.languages.find((l) => l.value === props.currentLanguage)?.label ?? props.currentLanguage;
-      const triggerButton = h65(
+      const triggerButton = h70(
         "button",
         {
           "aria-expanded": isOpen.value,
@@ -10845,14 +11603,14 @@ var BaseLanguageSwitcher = defineComponent63({
           type: "button"
         },
         [
-          h65(GlobeIcon, { size: 16 }),
-          h65(Typography_default, { class: cls3("__trigger-label"), variant: "body2" }, () => currentLabel),
-          h65(ChevronDownIcon, { size: 12 })
+          h70(GlobeIcon, { size: 16 }),
+          h70(Typography_default, { class: cls3("__trigger-label"), variant: "body2" }, () => currentLabel),
+          h70(ChevronDownIcon, { size: 12 })
         ]
       );
       const dropdownItems = props.languages.map((lang) => {
         const isActive = lang.value === props.currentLanguage;
-        return h65(
+        return h70(
           "button",
           {
             "aria-selected": isActive,
@@ -10861,18 +11619,18 @@ var BaseLanguageSwitcher = defineComponent63({
             role: "option",
             type: "button"
           },
-          [h65(Typography_default, { variant: "body2" }, () => lang.label)]
+          [h70(Typography_default, { variant: "body2" }, () => lang.label)]
         );
       });
-      const dropdown = isOpen.value ? h65("div", { class: cls3("__dropdown"), role: "listbox" }, dropdownItems) : null;
-      return h65(Card_default, { class: [cls3(""), props.className].filter(Boolean).join(" ") }, () => [triggerButton, dropdown]);
+      const dropdown = isOpen.value ? h70("div", { class: cls3("__dropdown"), role: "listbox" }, dropdownItems) : null;
+      return h70(Card_default, { class: [cls3(""), props.className].filter(Boolean).join(" ") }, () => [triggerButton, dropdown]);
     };
   }
 });
 var BaseLanguageSwitcher_default = BaseLanguageSwitcher;
 
 // src/components/presentation/language-switcher/LanguageSwitcher.ts
-var LanguageSwitcher = defineComponent64({
+var LanguageSwitcher = defineComponent68({
   name: "LanguageSwitcher",
   props: {
     className: { default: "", type: String },
@@ -10888,10 +11646,10 @@ var LanguageSwitcher = defineComponent64({
   },
   setup(props, { slots }) {
     const { currentLanguage, setLanguage } = useI18n_default();
-    return () => h66(
+    return () => h71(
       BaseLanguageSwitcher_default,
       {
-        class: withVendorCSSClassPrefix35("language-switcher--styled"),
+        class: withVendorCSSClassPrefix36("language-switcher--styled"),
         className: props.className,
         currentLanguage: currentLanguage?.value ?? "en",
         languages: props.languages,
@@ -10950,7 +11708,7 @@ var buildThemeConfigFromFlowMeta_default = buildThemeConfigFromFlowMeta;
 
 // src/index.ts
 import {
-  FieldType as FieldType4
+  FieldType as FieldType5
 } from "@asgardeo/browser";
 
 // src/utils/handleWebAuthnAuthentication.ts
@@ -10967,13 +11725,13 @@ import { http, http as http2 } from "@asgardeo/browser";
 
 // src/router/guard.ts
 import { inject as inject11 } from "vue";
-var logger7 = createVueLogger("Guard");
+var logger8 = createVueLogger("Guard");
 var createAsgardeoGuard = (options = {}) => {
   const { redirectTo = "/", waitForInit = true, initTimeout = 1e4 } = options;
   return async (_to, _from, next) => {
     const ctx = inject11(ASGARDEO_KEY);
     if (!ctx) {
-      logger7.error(
+      logger8.error(
         "createAsgardeoGuard: Asgardeo context not found. Ensure the AsgardeoPlugin is installed before using the router guard."
       );
       next({ path: redirectTo });
@@ -11018,13 +11776,13 @@ var createAsgardeoGuard = (options = {}) => {
 };
 
 // src/router/callbackRoute.ts
-import { defineComponent as defineComponent65, h as h67 } from "vue";
+import { defineComponent as defineComponent69, h as h72 } from "vue";
 var createCallbackRoute = (options = {}) => {
   const { path = "/callback", name, onError } = options;
-  const CallbackWrapper = defineComponent65({
+  const CallbackWrapper = defineComponent69({
     name: "AsgardeoCallbackRoute",
     setup() {
-      return () => h67(Callback_default, {
+      return () => h72(Callback_default, {
         ...onError && { onError }
       });
     }
@@ -11077,7 +11835,7 @@ export {
   BaseSignIn_default3 as BaseSignIn,
   BaseSignInButton_default as BaseSignInButton,
   BaseSignOutButton_default as BaseSignOutButton,
-  BaseSignUp_default as BaseSignUp,
+  BaseSignUp_default3 as BaseSignUp,
   BaseSignUpButton_default as BaseSignUpButton,
   BaseUserDropdown_default as BaseUserDropdown,
   BaseUserProfile_default as BaseUserProfile,
@@ -11106,7 +11864,7 @@ export {
   FLOW_META_KEY,
   FacebookButton_default as FacebookButton,
   FieldFactory_default as FieldFactory,
-  FieldType4 as FieldType,
+  FieldType5 as FieldType,
   FlowMetaProvider_default as FlowMetaProvider,
   FlowProvider_default as FlowProvider,
   GitHubButton_default as GitHubButton,
@@ -11135,7 +11893,7 @@ export {
   SignIn_default3 as SignIn,
   SignInButton_default as SignInButton,
   SignOutButton_default as SignOutButton,
-  SignUp_default as SignUp,
+  SignUp_default3 as SignUp,
   SignUpButton_default as SignUpButton,
   SignedIn_default as SignedIn,
   SignedOut_default as SignedOut,